如何使用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

回答

相关问题