CSS transform-style 属性用于指定一个元素的子元素是呈现在3D立体空间中，还是呈现在2D平面中。
transform-style属性可以接收2个值：flat或preserve-3d。当值为preserve-3d的时候，元素中的子元素被放置在3D空间中。当值为flat时，元素中的子元素被放置在2D平面中，它们不能沿Z轴移动。
注意，下面列出的CSS属性在被应用之前，需要浏览器用户代理将元素的子元素呈现为扁平状态，因此它们会覆盖transform-style: preserve-3d的行为。
- overflow：取值为
visible之外的任何值。 - filter：取值为
none之外的任何值。 - clip：取值为
auto之外的任何值。 - clip-path：取值为
none之外的任何值。 - isolation：取值为
isolate之外的任何值。 mask-image：取值为none之外的任何值。mask-box-source：取值为none之外的任何值。- mix-blend-mode：取值为
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属性的浏览器兼容性列表如下：
