为何CSS的rotateX与rotateY呈现错误轴旋转效果？

这不是轴用错了，是CSS 3D坐标系的定义和你的直觉预期不一致导致的，完全符合规范：

CSS的3D坐标系规则 #

CSS采用右手坐标系，三个轴的方向是：

• X轴：水平向右（从元素左边缘到右边缘）
• Y轴：垂直向下（从元素顶部到底部）
• Z轴：从屏幕平面指向观察者（也就是你）

用右手定则理解旋转方向 #

旋转的正方向遵循右手定则：伸出右手，拇指指向轴的正方向，其余手指弯曲的方向就是旋转正角度的转动方向。

rotateX的实际效果 #

rotateX是绕X轴旋转：

• 拇指指向X轴正方向（向右），手指弯曲方向为顺时针（从元素顶部视角看）
• 设置rotateX(20deg)时，元素顶部会向远离你的方向转动，底部向你靠近，视觉上呈现上下翻转/旋转的效果，和你测试里的红色方块表现一致。

rotateY的实际效果 #

rotateY是绕Y轴旋转：

• 拇指指向Y轴正方向（向下），手指弯曲方向为顺时针（从元素右侧视角看）
• 设置rotateY(20deg)时，元素右侧会向远离你的方向转动，左侧向你靠近，视觉上呈现左右翻转/旋转的效果，和你测试里的蓝色方块表现一致。

为什么会觉得“轴反了”？ #

很多人直觉里会默认Y轴是水平方向、X轴是垂直方向，或者认为Z轴指向屏幕内部，但CSS的坐标系定义刚好和这种直觉相反，才会产生“轴用错了”的错觉。

你的测试代码完全符合规范，效果是正确的：

div{
  width: 100px;
  height: 100px;
}

.vertical{
  background-color: red;
  transform: perspective(100px) rotateX(20deg);
  margin-bottom: 30px;
}

.horizontal{
  background-color: blue;
  transform: perspective(100px) rotateY(20deg);
}

<div class="vertical"></div>
<div class="horizontal"></div>

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