CSS3 元素子元素被扁平化transform-style应用实例

　　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代码：

　　<div class="transform-style-p"><div class="transform-style-s">transform-style:flat</div></div>

　　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);}

　　效果图：

 

 

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

　　html代码：

　　<div class="transform-style-p3d">

　　　<div class="transform-style-s1">transform-style:preserve-3d</div>
　　　<div class="transform-style-s2">transform-style:preserve-3d</div>

　　</div>

　　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);}

　　效果图：