CSS transform-style 属性用于指定一个元素的子元素是呈现在3D立体空间中，还是呈现在2D平面中。

transform-style属性可以接收2个值：flat或preserve-3d。当值为preserve-3d的时候，元素中的子元素被放置在3D空间中。当值为flat时，元素中的子元素被放置在2D平面中，它们不能沿Z轴移动。

注意，下面列出的CSS属性在被应用之前，需要浏览器用户代理将元素的子元素呈现为扁平状态，因此它们会覆盖transform-style: preserve-3d的行为。

• ：取值为visible之外的任何值。
• ：取值为none之外的任何值。
• ：取值为auto之外的任何值。
• ：取值为none之外的任何值。
• ：取值为isolate之外的任何值。
• mask-image：取值为none之外的任何值。
• mask-box-source：取值为none之外的任何值。
• ：取值为normal之外的任何值。

所以，如果你想将元素放置在3D空间中，必须确保这些元素的父容器元素没有设置以上这些属性值。

transform-style属性不会被继承，所以你必须在每一个需要制作3D空间的父容器元素上使用transform-style属性。

官方语法

transform-style: flat | preserve-3d

参数：

• flat：父容器元素中的子元素呈现在2D平面中。
• preserve-3d：父容器元素中的子元素呈现在3D立体空间中。

应用范围

transform-style属性可以应用在所有可变形的元素上。

示例代码

transform-style: preserve-3d
transform-style: flat

在线演示

下面的例子是一个翻书的例子，只有支持transform-style的浏览器才能看到效果。

浏览器支持

transform-style属性的浏览器兼容性列表如下：