transform-style[3D呈现]

语法

transform-style: flat | preserve-3d

说明

设置内嵌的元素在 3D 空间如何呈现。有两个值：flat：所有子元素在 2D 平面呈现。preserve-3d：保留3D空间。

取值

flat：所有子元素在 2D 平面呈现。
preserve-3d：保留3D空间。

实例代码

CSS

.demo_box{
    background:none;width:700px;height:300px;border:none;
}
.perspective{
    position:relative;width:200px;height:200px;float:left;margin:20px;
    -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

    

        1
        2
        3
        4
        5
        6
    
    

        1
        2
        3
        4
        5
        6
    
        

在线演示

兼容性