如何將CSS3 2D動畫轉換爲3D變換

我已經研究出如何在2D中使用CSS3來移動圖像。但是，我無法解決如何將其轉換爲3D運動。我已經閱讀了轉換，但他們都是關於翻轉和旋轉。我想移動。如何將CSS3 2D動畫轉換爲3D變換

我的2D CSS是：

.roundBallMove { 
    width: 20px; 
    height: 20px; 
    position: relative; 
    border-radius: 10px; 
    -webkit-animation: roundBallMove 20s; /* Chrome, Safari, Opera */ 
    animation: roundBallMove 20s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes roundBallMove { 
    0% {background:white; left:295px; top:300px;} 
    50% {background:white; left:295px; top:450px;} 
    100% {background:white; left:10px; top:10px;} 
} 

/* Standard syntax */ 
@keyframes roundBallMove { 
    0% {background:white; left:295px; top:300px;} 
    50% {background:white; left:295px; top:450px;} 
    100% {background:white; left:10px; top:10px;} 
}

什麼這顯示是先從投手球，被投，然後擊中左外野。命中左場應該是飛球（即3D軌跡中的弧）。

我真的很感激，如果有人可以告訴我如何讓它在拱門（3D軌跡）中飛行而不是直線撞擊。

問候，

格林

來源

2014-10-28 Glyn

我所做的是創建一個新的容器包含圖像和旋轉的容器。

的Java代碼：

//Run the play when the "Play Ball" button is selected. 
     runButton.addClickHandler(new ClickHandler() 
     { 
      public void onClick(ClickEvent event) { 

       if (play == 1) { 

        //play1(); 
        moveBallContainer.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT); 
        moveBallContainer.setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM); 

        moveBallContainer.add(img); 
        absolutePanel.add(moveBallContainer, 5, 200); 
        moveBallContainer.addStyleName("roundBall3DMove"); 
        answerTextBox1.setCursorPos(0); 

       } 
      } 
     });

CSS3的是：

.roundBall3DMove { 
    width: 295px; 
    height: 220px; 
    position: relative; 
    background: grey; /* So I can see what is happening - remove */ 
    border-radius: 0px; 
    perspective: 500px; 
    -webkit-animation-name: roundBall3DMove; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-duration: 2s; 

    animation-name: roundBall3DMove; 
    animation-timing-function: linear; 
    animation-iteration-count: 1; 
    animation-duration: 2s; 

    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    } 

    .roundBall3DMove:hover { 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
    } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes roundBall3DMove { 
    from { -webkit-transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg); } 
    to { -webkit-transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg); } 
} 

/* all other browsers */ 
    @keyframes roundBall3DMove { 
    from { 
     -moz-transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg); 
     -ms-transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg); 
     transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg); 
    } 
    to { 
     -moz-transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg); 
     -ms-transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg); 
     transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg); 
    } 
    }

此獲取三維運動。我有一些工作要做，讓球準確地到達我想要的地方。另外，在動畫結束時，球返回到開始位置。我不想要這個。我會爲此發佈另一個問題。但是，如果有人知道如何將球保持在目的地，我會非常感激你能否讓我知道。球從容器的右下角開始，我想在x，y，z軸上旋轉容器，以便球在左上角結束。

問候，

格林

來源

2014-10-31 03:09:15 Glyn

如何將CSS3 2D動畫轉換爲3D變換

回答

相關問題