CSS3 transform-style 屬性

語法

    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