如何使用CSS3停止圖像返回到起始點rotate3d

爲了讓3D球移動，我創建了一個新的容器來包含圖像並旋轉容器。如何使用CSS3停止圖像返回到起始點rotate3d

的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; 

    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ 
    animation-fill-mode: forwards; 

    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 Glyn

經過大量的擺弄它之後，我發現如果我調整x軸「rotate3d（0，0，1，180deg）;」，例如，「ROTATE3D（0，0，1，45deg）;然後它不會返回到原來的位置

問候，格林

來源

2014-11-02 00:09:36 Glyn

你要添加的animation-fill-mode屬性並將其設置爲轉發。動畫填充模式屬性接受：forwards動畫將應用動畫結束時的屬性值;向後應用在將開始動畫的第一次迭代的關鍵幀中定義的屬性值;兩者都將遵守前進和後退的規則。

-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards; 
animation-fill-mode:forwards;

請注意，此屬性在2.3以下的Android瀏覽器中不受支持。有關支持的更多信息，請參閱：http://caniuse.com/#feat=css-animation

來源

2014-10-31 11:27:52 jme11

嗨@ jme11，我已經有了。」動畫填充模式：forwards;「然而，非常感謝你的回答，我真的很感謝你的努力，我會繼續嘗試，關注Glyn – Glyn 2014-10-31 22:05:35

是的，我現在明白了，抱歉，不知何故，我錯過了它早些時候 – jme11 2014-10-31 22:39:30

Hi @ jme11 ，經過大量的擺弄之後，我發現如果我調整x axix「rotate3d（0,0,1,180deg）;」爲例如「rotate3d（0,0,1,45deg）;那麼它不會回到原來的位置。問候，Glyn – Glyn 2014-11-02 00:04:11

如何使用CSS3停止圖像返回到起始點rotate3d

回答

相關問題