如何在CSS3 2D animatuon转换为3D变换 [英] How to convert a CSS3 2D animatuon to a 3D Transform

问题描述

我已经制定了如何在2D使用CSS3移动的图像。不过，我可以不知道如何在3D将其转换为运动。我已在变换但它们都是关于翻转和旋转读了起来。我不想动了。

I have worked out how to move an image using CSS3 in 2D. However, I can not work out how to convert this to movement in 3D. I have read up on transforms however they are all about flipping and rotating. I want to move.

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

什么这显示是一个球开始的投手，正投，然后击中左外野。命中左外野应该是一个高飞球（即在三维轨迹拱）。

What this shows is a ball starting with the pitcher, being pitched and then hit to left field. The hit to left field should be a fly ball (i.e., an arch in 3D trajectory).

我真的AP preciate，如果有人能告诉我怎么走这为拱飞（3D轨迹），而不是一条直线时命中。

I would really appreciate it if someone can tell me how to get this to fly in an arch (3D trajectory) instead of a straight line when hit.

问候，

格林

推荐答案

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

What I have done is to create a new container to contain the image and rotated the container.

在Java code是：

The java code is:

//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是：

The CSS3 is:

.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轴方向

This gets a movement in 3D. I have some work to do to get the ball to go exactly where I want it. Also, at the end of the animation the ball returns to where it started. I do not want this. I will post another question for this. However, if any one know how to keep the ball at the destination I would be very grateful if you could let me know. The ball starts in the lower right of the container and I want to rotate the container in x, y, z axis so the ball ends up in the top left corner.

问候，

格林

这篇关于如何在CSS3 2D animatuon转换为3D变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！