CSS3 transform-style 屬性

標籤：position   平面   title   image   color   span   css   text   分享   

文法    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         ChromeIE 10+    Firefox 3.5+    Opera 11.50+    Safari 10+    Chrome 2.0+ 摘自：http://blog.sina.com.cn/s/blog_65c2ec5e0101fm8u.html

CSS3 transform-style 屬性