CSS如何让子元素不受父元素rotateX等3D旋转变换影响

问题原因 #

你遇到的扭曲问题来自两个核心错误：

1. 3D变换的抵消顺序错误：CSS transform的多步变换是按书写顺序依次生效的，父元素的变换顺序是rotateX(-60deg) → rotateZ(45deg)，如果要完全抵消，子元素需要按逆序做反向变换，也就是先抵消rotateZ，再抵消rotateX
2. 未开启3D空间：默认transform-style属性值为flat，会把父元素的3D变换结果拍平成2D平面，子元素的3D变换无法在同一个空间坐标系下计算，自然没法抵消父元素的旋转效果。

修复方案 #

修改对应CSS如下：

.sad_parent {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotateX(-60deg) rotateZ(45deg);
  /* 新增：开启3D空间，子元素继承父元素的3D坐标系 */
  transform-style: preserve-3d;
}

.sad_child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  /* 修改：逆序抵消父元素的两次旋转，所有旋转角度取反 */
  transform: rotateZ(-45deg) rotateX(60deg);
}

补充说明 #

2D平面的单轴旋转（比如普通的rotate()，等价于Z轴旋转）不需要考虑变换顺序，也不需要开启3D空间，所以直接反向旋转就能抵消，才会出现你第一个示例正常、3D变换示例异常的情况。

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