Css 正确旋转动画所需的透视图

我遇到了一个问题，我试图用这两个动画绕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); }
}

尽管最后一个关键帧的值不同，但这两个动画在同一方向上旋转。有人正确地指出，我需要将

透视图

应用到我的包含空间中，以实现效果功能（请注意将从3d空间中应用并删除

透视图

的复选框，以进行演示）：

-仅限铬

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

---

perspective CSS属性确定z=0平面和用户之间的距离，以便为三维定位元素提供一些透视。z>0的每个3D元素变大；z两半的每个3D元素都围绕Y轴以相反方向正确旋转。问题是，如果没有透视图，它们看起来并不像是在以不同的方式旋转

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

---

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

你的问题到底是什么？@Mr.Alien为什么这里需要使用

透视图

，因为在询问者的理解中，这不是。@Mr.Alien根据我的小提琴，应用

透视图

将我的图像的两半向相反方向旋转是必要的。我在文档中没有看到任何关于为什么会这样的内容。@ChrisHardie即使没有perspective@Mr.Alien你说的“有效”是什么意思？如果你在我的小提琴中取消选中复选框，那么两半部分是否不会开始向同一方向旋转？这是我试图理解的意想不到的效果，因为每一半的动画都不同。我永远无法让独角兽跳出分形绘画。。。现在我知道要寻找它，我确实看到了视错觉。