如何将 CSS3 2D 动画转换为 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 是:
My 2D CSS is:
.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 轨迹中的拱形).
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).
如果有人能告诉我如何让它在被击中时以拱形(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代码为:
//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 轴上旋转容器,以便球在左上角结束.
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 动画转换为 3D 变换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!