transform-style
屬性是3D空間一個重要屬性,指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值:flat
和preserve-3d
。javascript
transform-style
屬性的使用語法很是簡單:css
transform-style: flat | preserve-3d
其中flat
值爲默認值,表示全部子元素在2D平面呈現。preserve-3d
表示全部子元素在3D空間中呈現。html
也就是說,若是對一個元素設置了transform-style
的值爲flat
,則該元素的全部子元素都將被平展到該元素的2D平面中進行呈現。沿着X軸或Y軸方向旋轉該元素將致使位於正或負Z軸位置的子元素顯示在該元素的平面上,而不是它的前面或者後面。若是對一個元素設置了transform-style
的值爲preserve-3d
,它表示不執行平展操做,他的全部子元素位於3D空間中。java
transform-style
屬性須要設置在父元素中,而且高於任何嵌套的變形元素。最後,咱們運用一個翻轉的例子,來加深一下對transform-style
屬性的印象:css3
<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>
.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{ 0%{ transform:rotateY(0deg) } 100%{ transform:rotateY(360deg) } } .spin { width: 142px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -72px; margin-top: -101px; border: 1px dashed orange; cursor: pointer; transform-style: preserve-3d; } /*調用動畫*/ .spin:hover{ animation:spin 5s linear infinite; } .rotate { background: url(images/cardKingClub.png) no-repeat center; background-size: