css - 如何将 CSS3 2D 动画转换为 3D 变换

Question

我已经弄清楚如何使用 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 轨迹)而不是直线飞行，我将不胜感激。

问候，

格林

Answer 1

我所做的是创建一个新容器来包含图像并旋转容器。

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

这会产生 3D 运动。我需要做一些工作才能让球准确地到达我想要的位置。此外，在动画结束时，球会返回到它开始的位置。我不想要这个。我将为此发布另一个问题。但是，如果有人知道如何将球保持在目的地，请告诉我，我将不胜感激。球从容器的右下角开始，我想沿 x、y、z 轴旋转容器，以便球最终位于左上角。

问候，

格林