CSS3 变换复杂旋转意外行为

Question

从透视图中查看 div 并进行转换 rotateY(-90deg) rotateX(-180deg)，在 rotateZ(-90deg) 之前不会旋转-90 度，而是旋转 +270 度。

div的样式来自
变换:rotateY(-90deg) rotateX(-180deg);
到
变换:rotateZ(-90deg) rotateY(-90deg) rotateX(-180deg);

我不确定这种行为是否与以下事实有关:当您以 rotate(90deg) rotate(90deg) rotate(90deg) 的方式链接三个旋转时，结果不是旋转+270 度但 -90 度。

请在此处查看 jsFiddle http://jsfiddle.net/Sdg2W/1/

这是一个错误吗？任何见解将不胜感激。

Answer 1

据我所知，它正在旋转。你说一个顺时针旋转，另一个逆时针旋转是对的。但是您忽略了一个事实，即当旋转到 +270 时，它会旋转 3/4 整圈。你的 fiddle 只能转动一整圈的 1/4。

请参阅另一个 fiddle :[http://jsfiddle.net/vals/Sdg2W/2/]。我只是改变了进行转换的方式，以便您可以更轻松地使用它。

我认为让您感到困惑的是，因为 Y 轴有 180 度，所以旋转是反转的(如果那是唯一的变换，您会期望的)