transform-style

规定如何在3d空间中呈现被嵌套的元素

语法

transform-style:flat | preserve-3d;
-webkit-transform-style:flat | preserve-3d;

flat:子元素将不保留其 3D 位置。
preserve-3d:子元素将保留其 3D 位置。

浏览器支持

Firefox支持 transform-style 属性。

Opera,Chrome 和 Safari 支持替代的 -webkit-transform-style 属性。

定义和用法

规定如何在3d空间中呈现被嵌套的元素

该属性必须与 transform 属性一同使用

实例代码

<style>
    .outer{
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px;
        border: 1px solid #000;
    }
    .inner{
        position: absolute;
        border: 1px solid #000;
        color: #fff;
    }
    .inner1{
        padding: 50px;
        background-color: #00a1d2;
    }
    .inner2{
        padding: 40px;
        background-color: #0b2c89;
    }
    .perverse-3d{
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
    }
    .flat{
        transform-style: flat;
        -webkit-transform-style: flat;
    }
    .rotate40{
        transform: rotateY(4deg);
        -webkit-transform: rotateY(40deg);
    }
    .rotate80{
        transform: rotateY(80deg);
        -webkit-transform: rotateY(80deg);
    }
</style>    

<p>transform-style: preserve-3d</p>
<div class="outer">
    <div class="inner inner1 rotate40 perverse-3d">rotate40 transform-style: preserve-3d
        <div class="inner inner2 rotate80">rotate80</div>
    </div>
</div>

<p>transform-style: flat</p>
<div class="outer">
    <div class="inner inner1 rotate40 flat">rotate40 transform-style: flat
        <div class="inner inner2 rotate80">rotate80</div>
    </div>
</div>

效果：

transform-style: preserve-3d

transform-style: flat