css - 为什么css中rotateX中的负值不会改变旋转方向

Question

如果你把 css transform: rotateY(-30deg)vs transform: rotateY(30deg). 您将获得两种不同的结果，即您所期望的结果。朝一个方向或另一个方向旋转。与 Z 轴相同。

但是对于 X 轴，情况似乎并非如此。当在 X 轴上旋转时，我希望顶部位于前面，而底部则返回。

查看演示：http: //jsfiddle.net/techsin/x5Qgx/3/

它是css中的错误吗？

我知道我可以给它 330 之类的值，但它会旋转两次并弄乱我想要的动画。如果不是动画，我会使用它。

太令人沮丧了。

它适用于 Y、Z，但为什么不适用于 X？

Answer 1

因为它显示的是正交投影。

您需要定义父元素的透视图：

-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;

MDN 上的更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/perspective