CSS3中設置3D變形的transform-style屬性介紹

這篇文章主要介紹“CSS3中設置3D變形的transform-style屬性介紹”，在日常操作中，相信很多人在CSS3中設置3D變形的transform-style屬性介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3中設置3D變形的transform-style屬性介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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一樣的效果），如下圖所示：

到此，關于“CSS3中設置3D變形的transform-style屬性介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！