CSS rotate3d旋转规则存疑：各轴定则差异及立方体动画疑问

一、RotateX/Z与RotateY的定则差异，以及rotate3d的规则 #

• 首先纠正一个误解：CSS 3D旋转本质上统一遵循右手螺旋定则，你感知到的差异是因为CSS坐标系的Y轴方向特殊（常规3D坐标系Y轴向上，而CSS Y轴向下）。
  • CSS的3D坐标系约定：X轴向右，Y轴向下，Z轴指向观察者（屏幕外）。
  • rotateX(angle)：绕X轴旋转，右手拇指指向X轴正方向（右），四指弯曲的方向就是正角度的旋转方向。视觉上，正角度会让元素顶部向屏幕内翻转，底部向屏幕外翻转——这和你说的“左手定则”感知一致，其实是Y轴向下导致的视觉错觉。
  • rotateY(angle)：绕Y轴旋转，右手拇指指向Y轴正方向（下），四指弯曲方向为正角度旋转方向。视觉上，正角度会让元素右侧向屏幕内翻转，左侧向屏幕外翻转——这看起来像是“右手定则”，本质还是统一的右手螺旋定则，只是Y轴向下的坐标系导致视觉方向和常规3D场景不同。
  • rotate3d(x,y,z,angle)：完全遵循右手螺旋定则：将拇指指向由(x,y,z)定义的向量方向，四指弯曲的方向就是正角度的旋转方向。

二、3D立方体示例中翻转旋转角度符号的原因，以及translateZ(-100px)的作用 #

• 翻转角度符号的原因：该示例中立方体的每个面是通过transform组合定位的（比如右侧面是rotateY(90deg) translateZ(100px)），这些初始旋转是基于“立方体面向观察者”的基准状态。当你给父容器添加绕Y轴的旋转动画时，若使用正角度，叠加的旋转会让立方体的面运动方向和你预期的视觉方向相反（比如你想让立方体顺时针转，但实际视觉上是逆时针）。翻转角度符号后，旋转方向与面的初始transform叠加，才能得到符合直觉的动画效果——本质是初始transform的旋转方向和动画旋转方向的叠加逻辑导致的，并非CSS旋转规则本身的问题。
• translateZ(-100px)是否可选：是的，它并非动画生效的必要条件。这个属性的作用是让立方体整体在透视空间中向后移动，避免因为perspective设置导致立方体离观察者过近而产生过度变形。如果不设置，动画依然会生效，但立方体的透视视觉效果会有所不同（比如看起来更大、变形更明显），具体取决于你的需求。

内容的提问来源于stack exchange，提问作者Linsu Han