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

前端  /  管理员 发布于 7年前   455

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

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

CSS Code复制内容到剪贴板

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

XML/HTML Code复制内容到剪贴板

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

CSS Code复制内容到剪贴板

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.         transform:rotateY(360deg)   
16.     }   
17. }   
18. .spin {   
19.     width: 142px;   
20.     height: 200px;   
21.     position: absolute;   
22.     top: 50%;   
23.     left: 50%;   
24.     margin-left: -72px;   
25.     margin-top: -101px;   
26.     border: 1px dashed orange;   
27.     cursor: pointer;   
28.     transform-style: preserve-3d;   
29. }   
30. /*调用动画*/  
31. .spin:hover{   
32.     animation:spin 5s linear infinite;   
33. }   
34. .rotate {   
35.     background: url(images/cardKingClub.png) no-repeat center;   
36.     background-size: 100% 100%;   
37.     border: 5px solid hsla(50,50%,50%,.9);   
38.     transform: perspective(200px) rotateY(45deg);   
39. }   
40. .rotate img{   
41.     border: 1px solid green;   
42.     transform: rotateX(15deg) translateZ(10px);   
43.     transform-origin: 0 0 40px;   
44. }   
45. /*改变transform-style的默认值*/  
46. .three-d {   
47.     transform-style: preserve-3d;   
48. }  

特别声明：为了节省篇幅，代码中CSS3属性代码省去了各浏览器的私有前缀，在实际操作中，需要将各浏览器前缀加上，才会有效果。

其效果如下所示：

正如您所看到的，当元素设置.rotate设置了flat值时，其子元素img不会根据translateZ()值摊开，而在同一平面旋转，如上图上部分所示；当元素.rotate设置了preserve-3d值时，其子元素img会根据translateZ()值摊开，不再会堆叠在一起，如上图下部分所示。

有一点需要特别提醒大家，如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫死子元素出现在同一平面（和元素设置了transform-style为flat一样的效果），如下图所示：