CSS基礎篇--CSS3圖片翻轉動畫技術詳解

CSS動畫很是的有趣；這種技術的美就在於，經過使用不少簡單的屬性，你能建立出漂亮的消隱效果。其中表明性的一種就是CSS圖片翻轉效果，能讓你看到一張卡片的正反兩面上的內容。本文就是要用最簡單的方法向你們介紹如何建立這種效果。

網上有不少其它的教材，但裏面添加了不少多餘的代碼樣式，須要讀者去分清哪些是必要的，那些是無用的；本文避免了這些問題，只列出了必要的CSS代碼，你能夠在其上添加本身喜歡的風格來美化這些卡片。

HTML代碼

實現正反面效果的HTML代碼，估計你也能想到應該是這樣的：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- 前面內容 -->
        </div>
        <div class="back">
            <!-- 背面內容 -->
        </div>
    </div>
</div>

正如你想到的，應該有兩個容器，分別存放卡片「前面」和「背面」，經過CSS，咱們會指定這兩個容器元素本身的做用。還有須要注意的是ontouchstart這段js，它能讓你使用觸屏來觸發翻轉動做。顯然，你應該把這段代碼單獨提取出來，讓JavaScript代碼放到一塊兒。

CSS代碼

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

下面是大概的整個過程的原理：

• 在最外層的容器元素上設置整個動畫區域的透視(perspective)屬性。
• 當外層容器元素遇到鼠標懸停事件時，內部存放卡片的容器旋轉180度。這裏也是控制旋轉速度的地方。若是將旋轉值設置爲-180deg，是反向旋轉。
• 表示卡片正面和背面的元素都要絕對定位，這樣它們才能在相同的位置相互遮擋。它們的背面可視性(backface-visibility)屬性設置爲隱藏，這樣每一個卡片的背面在翻轉時都是看不見的。
• 將卡片的正面設置爲一個比背面要高的z-index值，這樣保證卡片的正面在最上面。
• 將背面卡片旋轉180度，這樣讓它扮演背面的角色。

這就是所有這些代碼的做用！你把這段代碼放到你的網頁裏，而後修飾一下卡片的樣式就好了！

注：對卡片元素的 某些屬性設置一些特定的值(例如)(like overflow: hidden)會致使其子元素喪失3D變換功能。我承認他的觀點，由於正是在本文的例子中我正好遇到了 overflow: hidden相關的麻煩，它致使了3D變換子元素全都出如今了同一個平面上，有幾個是被旋轉了180度。

觸發CSS翻轉

若是你喜歡用JavaScript來觸發翻轉動做，下面這個簡單的css樣式類就能幫你作到這樣：

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
    transform: rotateY(180deg);
}

使用javascript給容器元素添加這個css flip類就能觸發卡片翻轉——不須要用戶懸停鼠標在上面。用document.querySelector("#myCard").classList.toggle("flip")實現它！

CSS豎向翻轉

執行豎向翻轉也很簡單，跟橫向翻轉同樣，只須要修改一下 transform-origin的值，而後讓它按X軸旋轉。

.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* 高的一半 */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }

注意這裏用的是rotateX，而不是以前的rotateY。

讓IE支持這種動畫技術

須要針對IE對這段標準的卡片翻轉代碼進行特殊的修改，由於IE尚未實現現代瀏覽器中的transform功能。基本的作法就是對正面和背面兩個卡片同時分別翻轉：

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
}

/* 
    Some vertical flip updates 
*/
.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container:hover .back {
        transform: rotateX(0deg);
    }

    .vertical.flip-container:hover .front {
        transform: rotateX(180deg);
    }

使用上面的這段代碼，IE10裏也能正確的進行卡片翻轉了！

這個CSS卡片翻轉動畫技術一直是一個經典的案例，表明着CSS動畫可以實現的效果，甚至3DCSS動畫能實現的強大效果。優勢就是使用的代碼不多很簡單。對於製做HTML5動畫來講這種效果很是的實用，能夠說完美。

參考地址

• Create a CSS Flipping Animation
• CSS圖片翻轉動畫技術詳解