Transform-style和Perspective屬性

schukai發表於2016-02-15
ORM

在《CSS3 Transform——transform-origin》一文中主要介紹了CSS3 Transform屬性中的transform-origin屬性的使用，其實在transform屬性中，transform-origin屬性僅是其中之一，要徹底理解transform屬性，這是不夠的，必須的理解其他屬性的應用。今天將和大家一起探討transform中transform-style和perspective相關屬性的使用。

transform-style屬性

transform-style屬性是3D空間一個重要屬性，指定巢狀元素如何在3D空間中呈現。他主要有兩個屬性值：flat和preserve-3d。

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

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

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

CSS

.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: 100%

相關文章