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

标签 css transform

如果你输入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/

相关文章:

json - 如何在 Liquid json 转换中使用 foreach 和追加字符串

html - 在手机上激活按钮?

html - 如何在angular 2中动态更改css类名

html - 转换背景和固定位置时如何摆脱重叠?

c# - Unity3D:将 child 移动到 parent 的轨道上

C++11 将 shared_ptr 转换为 vector 和类

css - 具有尖头的矩形,悬停时会改变颜色

html - 如何定义 CSS 以去除困惑的 HTML?

html - div 的文本和边框之间的空格,为什么?

javascript - 使用 javascript 将投影变换应用于 CSS 来纠正透视