CSS transform rotate()的X轴旋转表现与Y、Z轴存在差异

这个表现是完全正常的，核心原因在于CSS 3D变换遵循「局部坐标系（元素自身空间）」规则，所有旋转操作都是基于元素当前的自身轴，而非固定的视口全局轴。

核心原理 #

CSS的transform属性是顺序累积生效的：每一次变换都会更新元素的局部坐标系。当你先绕Y轴旋转90°后，元素的X轴方向已经和初始状态下的全局Z轴方向重合了——此时再绕X轴旋转，视觉上自然和绕初始全局Z轴旋转的效果一致。

你觉得Y、Z轴旋转「始终基于视口」是视觉错觉：实际上Y、Z轴同样是元素的局部轴，只是后续旋转的视觉效果让你误以为是基于全局轴。比如绕Z轴旋转时，元素的局部Z轴始终垂直于自身表面，当元素绕Y轴转向后，这个Z轴也跟着改变了方向。

结合你的代码分析 #

看你用GSAP写的时间线：

tl.to("#square", { rotateY: "90deg", duration: 5 })
  .to("#square", { rotationZ: "90deg", duration: 5 }, "<1")
  .to("#square", { rotateX: "90deg", duration: 5 });

第一步执行rotateY:90deg后，#square的局部X轴已经转向了初始全局Z轴的方向；第三步的rotateX:90deg是绕这个已经偏移的局部X轴旋转，因此视觉效果和绕全局Z轴旋转完全一致。

你添加的坐标轴可视化也验证了这一点：因为坐标轴是附加在元素上的，它们会跟随元素的局部坐标系同步变换，所以你能看到X轴方向动态改变。

如何基于全局视口轴旋转 #

如果需要让所有旋转都基于初始的视口全局坐标系，可以通过嵌套容器分层变换实现：

1. 创建多层嵌套容器，每层只负责一个轴的旋转
2. 父容器的变换只会改变子元素的位置，不会修改子元素的局部坐标系

示例结构：

<div class="rotate-y-wrapper">
  <div class="rotate-x-wrapper">
    <div id="square" class="square">...</div>
  </div>
</div>

然后分别给不同容器应用旋转：

tl.to(".rotate-y-wrapper", { rotateY: "90deg", duration: 5 })
  .to(".rotate-x-wrapper", { rotateX: "90deg", duration: 5 }, "<1");

这样.rotate-x-wrapper的X轴旋转就是基于全局坐标系的，不会受父容器Y轴旋转的影响。

内容的提问来源于stack exchange，提问作者Cesare Polonara