如何在CSS中还原子元素的skew与rotate变换效果？

父元素的变换是按skewY(-45deg) → rotateX(30deg)的顺序执行的，而子元素直接用相反顺序的变换无法抵消，因为子元素的变换是在父元素变换后的局部坐标系上进行的，必须逆序应用相反变换才能恢复默认状态。

修正后的代码 #

#ace {
  width: 50vw;
  height: 50vw;
  background: green;
  transform: skewY(-45deg) rotateX(30deg);
}

#bace {
  width: 50%;
  height: 50%;
  background: black;
  /* 逆序抵消：先消除rotateX的影响，再消除skewY的影响 */
  transform: rotateX(-30deg) skewY(45deg);
}

简单解释 #

父元素的变换流程是：原始状态 → 斜切Y轴 → X轴旋转；子元素要回到原始状态，得反向走这个流程——先把X轴旋转的影响抵消掉，再抵消斜切的影响，所以变换顺序必须反过来写，才能让子元素完全恢复到未变换的默认状态。

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