转换样式

此示例展示了 -webkit-transform-style 的效果。蓝色框上设置了透视。紫色框具有

  -webkit-transform-style: preserve-3d;

这使得黄色和绿色框位于共享的 3D 空间中，因此通过它们的变换，看起来像是远离紫色框。

然而，当您悬停时，我们将紫色框设置为

  -webkit-transform-style: flat;

这样其子元素会折叠到其中。它们的 -webkit-transform 仍然有效，但现在它仅仅是一种绘制效果，并且不受容器透视的影响。