Question

为了让球在3D中移动，我创建了一个新容器来容纳图像并旋转容器。

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);
    }
  }

这会产生3D动作。但是，在动画结束时，球会返回到它开始的位置。我不想要这个。球从容器的右下方开始，我想在x，y，z轴上旋转容器，这样球就会在左上角结束然后保持在那里。

此致

格林

Answer 1

您想要添加 animation-fill-mode 属性并将其设置为转发。 animation-fill-mode属性接受：转发动画将在动画结束时应用属性值的位置;向后应用将在动画的第一次迭代开始的关键帧中定义的属性值;两者都将遵守前后规则。

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

请注意，2.3以下的Android浏览器不支持此属性。有关支持的详细信息，请参阅：http://caniuse.com/#feat=css-animation

Answer 2

经过大量的摆弄后，我发现如果我调整x轴“rotate3d（0,0,1,180deg）;”例如，“rotate3d（0,0,1,45deg）;然后它不会返回到原始位置。

问候，Glyn

如何使用CSS3 rotate3d停止图像返回到其起始点

2 个答案: