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 属性的浏览器兼容性列表如下：