Question

我遇到了一个问题，我试图用这两个动画围绕y轴以相反的方向旋转图像的两半：

@-webkit-keyframes first{
    0%   { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(-90deg); }
}

@-webkit-keyframes second{
    0%   { -webkit-transform: rotateY(0);}
  100% { -webkit-transform: rotateY(90deg); }
}

尽管最后一个关键帧的值不同，但两个动画在同一方向上旋转。有人正确地指出我需要将perspective应用到我的包含空间才能使效果起作用（请注意将应用的复选框并从3d空间中删除perspective来演示）：

http://jsfiddle.net/eveQt/12/ - 仅限Chrome浏览器

我很好奇为什么会这样。来自MDN：

透视CSS属性确定z = 0平面与用户之间的距离，以便为3D定位元素提供一些透视图。 z> 0的每个3D元素变大; z＆lt; 0的每个3D元素变小。效果的强度取决于此属性的值。

根据我的理解，perspective沿z平面移动观察者，使3d效果或多或少变强。我不明白的是，沿z平面移动会如何以这种方式影响元素的旋转方向。我原以为perspective只会影响效果的戏剧性，而不会影响元素旋转的方向。

显然，在我的例子中，perspective的应用是图像每一半的正确旋转方向所必需的，但为什么呢？

Answer 1

两个半部绕Y轴正确旋转，方向相反。问题是，如果没有透视，他们看起来不会以不同的方式轮换。

在这种情况下应用透视基本上使图像的一侧比另一侧大，因为它围绕Y轴旋转。如果没有透视图，则无论图像旋转的方向如何，图像的两面都保持相同的大小。

看看整个图像在没有透视的情况下旋转，并想象它在一个方向上旋转。然后闭上眼睛，当你再次打开它们时，想象它正朝另一个方向旋转。魔术！

正确旋转动画所需的透视

1 个答案: