transform-style 是 CSS3 中新增的属性之一，它用于指定元素的子元素是在三维空间内，还是在该元素所在的平面内被扁平化。由此可知，transform-style 只有两个取值，一个在三维空间内，另一个在平面内；如果设置为在三维空间内，通常需要配合旋转属性rotate。

transform-style语法规则比较简单，但如果对它不熟悉似乎不太好理解，子元素在三维空间内或平面内被扁平化的作用何在？对于此凝问，查看应用实例似乎好理解一些。

一、transform-style语法规则

transform-style：flat | preserve-3d

transform-style用于指定元素的子元素是在三维空间内，还是在该元素所在的平面内被扁平化；表达式共有两个取值，设置时取其中一个

即可。

二、transform-style取值说明

flat：指定元素的子元素位于该元素所在的平面内，为默认值；

preserve-3d：指定元素的子元素位于三维空间内。

当在元素的父元素上设置 transform-style 的属性为 preserve-3d 时，元素会创建局部堆叠上下文。

三、transform-style应用实例

1、元素的子元素位于该元素所在的平面内

html代码：

CSS样式：

.transform-style-p{transform-style:flat;transform:rotate(30deg);width:250px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

.transform-style-s{transform:rotateY(50deg);}

效果图：

transform-style:flat

2、元素的子元素位于三维空间内

html代码：

CSS样式：

.transform-style-p3d{transform-style:preserve-3d;transform:rotate(30deg);width:250px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

.transform-style-s1{transform:rotateY(30deg);}

.transform-style-s2{transform:rotateZ(20deg) translateZ(1em);}

效果图：

transform-style:preserve-3d

transform-style:preserve-3d