transform-style屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值：flat和preserve-3d。

transform-style屬性的使用語法非常簡單：

CSS Code復制內容到剪貼板

transform-style: flat | preserve-3d  

其中flat值為默認值，表示所有子元素在2D平面呈現。preserve-3d表示所有子元素在3D空間中呈現。

也就是說，如果對一個元素設置了transform-style的值為flat，則該元素的所有子元素都將被平展到該元素的2D平面中進行呈現。沿著X軸或Y軸方向旋轉該元素將導致位于正或負Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者后面。如果對一個元素設置了transform-style的值為preserve-3d，它表示不執行平展操作，他的所有子元素位于3D空間中。

transform-style屬性需要設置在父元素中，并且高于任何嵌套的變形元素。最后，我們運用一個翻轉的例子，來加深一下對transform-style屬性的印象：
HTML模板

XML/HTML Code復制內容到剪貼板

<div class="wrap">  
    <div class="spin">  
        <div class="rotate">  
            <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
        </div>  
    </div>  
</div>  
<div class="wrap">  
    <div class="spin">  
        <div class="rotate three-d">  
            <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
        </div>  
    </div>  
</div>  

CSS

CSS Code復制內容到剪貼板

.wrap {   
    width: 500px;   
    height: 300px;   
    margin: 30px auto;   
    position: relative;   
    background: url(images/bg-grid.jpg) no-repeat center center;   
    background-size: 100% 100%;   
}   
/*設置動畫*/  
@keyframes spin{