CSS3中设置3D变形的transform-style属性详解

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。

transform-style属性的使用语法非常简单：

1. 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模板

1. <div class="wrap">  
2.     <div class="spin">  
3.         <div class="rotate">  
4.             <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
5.         </div>  
6.     </div>  
7. </div>  
8. <div class="wrap">  
9.     <div class="spin">  
10.         <div class="rotate three-d">  
11.             <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
12.         </div>  
13.     </div>  
14. </div>  

CSS

1. .wrap {   
2.     width: 500px;   
3.     height: 300px;   
4.     margin: 30px auto;   
5.     position: relative;   
6.     background: url(images/bg-grid.jpg) no-repeat center center;   
7.     background-size: 100% 100%;   
8. }   
9. /*设置动画*/  
10. @keyframes spin{   
11.     0%{   
12.         transform:rotateY(0deg)   
13.     }   
14.     100%{   
15.     &n