如果你输入CSS transform:rotateY(-30deg)
vs transform:rotateY(30deg)
。您将得到两种不同的结果,即您所期望的结果。朝一个方向或另一个方向旋转。与Z轴相同。
但对于 X 轴,情况似乎并非如此。我希望在绕 X 轴旋转时顶部位于前面,而底部位于后面。
查看演示: http://jsfiddle.net/techsin/x5Qgx/3/
CSS有bug吗?
我知道我可以给它一个像 330 之类的值,但这会旋转它两次并弄乱我想要的动画。如果不是为了动画我会用它。
太令人沮丧了。
它适用于 Y、Z,但为什么不适用于 X?
最佳答案
因为它显示的是正交投影。
您需要定义父元素的视角:
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
更多信息请参见 MDN:https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
关于css - 为什么css中rotateX的负值不会改变旋转方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18711046/