如何在子CSS上恢复偏斜+旋转转换

Question

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

<div id="ace"
>
<div id="bace"
>

</div>
</div>

我使用了完全相反的转换，但它仍然没有返回到默认值。

Answer 1

正如Ouroborus在他的评论中所指出的，以应用转换的相反顺序撤消转换。另外，将transform-style: preserve-3d添加到外部div中，因为您在三维空间中进行变换。

因为转换是三维的，所以内部div的一部分将位于外部div后面。在下面的演示中，我将外部div设置为半透明的，以帮助说明这一点。

#ace {
width: 50vw;
height: 50vw;
background: #0f0a;
transform-style: preserve-3d;
transform: skewY(-45deg) rotateX(30deg);
}
#bace {
width: 50%;
height: 50%;
background: black;
transform: rotateX(-30deg) skewY(45deg);
}

<div id="ace">
<div id="bace">
</div>
</div>