欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3中設(shè)置3D變形的transform-style屬性詳解

W3CPlus   發(fā)布時(shí)間：2016-05-23 11:21:03   作者：大漠   我要評論
transform-style經(jīng)常被用來做三維空間坐標(biāo)系中的圖形變換,下面我們就來看看CSS3中設(shè)置3D變形的transform-style屬性詳解,需要的朋友可以參考下

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. transform-style: flat | preserve-3d  

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

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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復(fù)制內(nèi)容到剪貼板
  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. /*設(shè)置動(dòng)畫*/  
  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. /*調(diào)用動(dòng)畫*/  
  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的默認(rèn)值*/  
  46. .three-d {   
  47.     transform-style: preserve-3d;   
  48. }  

特別聲明：為了節(jié)省篇幅，代碼中CSS3屬性代碼省去了各瀏覽器的私有前綴，在實(shí)際操作中，需要將各瀏覽器前綴加上，才會(huì)有效果。

其效果如下所示：
2016523112112665.png (391×487)

正如您所看到的，當(dāng)元素設(shè)置.rotate設(shè)置了flat值時(shí)，其子元素img不會(huì)根據(jù)translateZ()值攤開，而在同一平面旋轉(zhuǎn)，如上圖上部分所示；當(dāng)元素.rotate設(shè)置了preserve-3d值時(shí)，其子元素img會(huì)根據(jù)translateZ()值攤開，不再會(huì)堆疊在一起，如上圖下部分所示。

有一點(diǎn)需要特別提醒大家，如果你的元素設(shè)置了transform-style值為preserve-3d，就不能為了防止子元素溢出容器而設(shè)置overflow值為hidden，如果設(shè)置了overflow:hidden同樣可以迫死子元素出現(xiàn)在同一平面（和元素設(shè)置了transform-style為flat一樣的效果），如下圖所示：
2016523112154847.jpg (463×402)

相關(guān)文章

  • CSS3的常見transformation圖形變化用法小結(jié)

    這篇文章主要介紹了CSS3的常見transformation圖形變化用法小結(jié),共整理了旋轉(zhuǎn)、縮放、平移、傾斜以及矩陣的使用方法,需要的朋友可以參考下
    2016-05-13

  • 淺談CSS3中的變形功能-transform功能

    這篇文章主要介紹了淺談CSS3中的變形功能-transform功能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-27

最新評論