语法
transform-style: flat | preserve-3d
语法项目 说明
初始值 flat
适用于 块元素和行内元素
可否继承 否
媒介 视觉
版本 CSS3.0
说明
设置内嵌的元素在 3D 空间如何呈现。有两个值：
flat：所有子元素在 2D 平面呈现。
preserve-3d：保留3D空间。
取值
flat：所有子元素在 2D 平面呈现。
preserve-3d：保留3D空间。
实例
css：
.demo_box{ ???background:none;height:300px;border:none;}.perspective{ ???position:relative;width:200px;height:200px;float:left;margin:100px; ???-webkit-transform:perspective(300px); ???-moz-transform:perspective(300px);}.m3d{ ???-moz-transform-style:preserve-3d; ???-webkit-transform-style:preserve-3d;}.perspective span{ ???display:block;position:absolute;width:198px;height:198px;font-size:120px;line-height:198px;text-align:center; ???background:rgba(0,0,0,0.2);border:1px solid #333; ???}.front{ ???-webkit-transform:rotateY(0deg) translateZ(100px); ???-moz-transform:rotateY(0deg) translateZ(100px);}.back{ ???-webkit-transform:rotateY(180deg) translateZ(100px); ???-moz-transform:rotateY(180deg) translateZ(100px);}.right{ ???-webkit-transform:rotateY(90deg) translateZ(100px); ???-moz-transform:rotateY(90deg) translateZ(100px);}.left{ ???-webkit-transform:rotateY(-90deg) translateZ(100px); ???-moz-transform:rotateY(-90deg) translateZ(100px);}.top{ ???-webkit-transform:rotateX(90deg) translateZ(100px); ???-moz-transform:rotateX(90deg) translateZ(100px);}.bottom{ ???-webkit-transform:rotateX(-90deg) translateZ(100px); ???-moz-transform:rotateX(-90deg) translateZ(100px);}html：
<div class="demo_box"> ???<div class="perspective"> ???????<span class="front">1</span> ???????<span class="back">2</span> ???????<span class="right">3</span> ???????<span class="left">4</span> ???????<span class="top">5</span> ???????<span class="bottom">6</span> ???</div> ???<div class="perspective m3d"> ???????<span class="front">1</span> ???????<span class="back">2</span> ???????<span class="right">3</span> ???????<span class="left">4</span> ???????<span class="top">5</span> ???????<span class="bottom">6</span> ???</div></div>
效果
兼容性
IE Firefox Opera Safari Chrome
IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+
摘自：http://blog.sina.com.cn/s/blog_65c2ec5e0101fm8u.html
CSS3 transform-style 属性
原文地址：http://www.cnblogs.com/hjbky/p/7452923.html