CSS圖片翻轉(zhuǎn)動畫技術(shù)詳解（IE也實現(xiàn)了）
我要評論CSS動畫非常的有趣；這種技術(shù)的美就在于，通過使用很多簡單的屬性，你能創(chuàng)建出就連皮克斯動畫制作公司也會贊嘆的漂亮的消隱效果。其中代表性的一種就是CSS圖片翻轉(zhuǎn)效果，能讓你看到一張卡片的正反兩面上的內(nèi)容。本文就是要用最簡單的方法向大家介紹如何創(chuàng)建這種效果。
簡單說明：這并不是第一篇我介紹這種技術(shù)的文章，但我發(fā)現(xiàn)那些都過于復(fù)雜了。網(wǎng)上還有很多其它的教材，但里面添加了很多多余的代碼樣式，需要讀者去分清哪些是必要的，那些是無用的；本文避免了這些問題，只列出了必要的CSS代碼，你可以在其上添加自己喜歡的風(fēng)格來美化這些卡片。
HTML代碼
實現(xiàn)正反面效果的HTML代碼，估計你也能想到應(yīng)該是這樣的：
<div class="flip-container lazy " ontouchstart="this.classList.toggle('hover');">
<div class="flipper lazy ">
<div class="front lazy ">
<!-- 前面內(nèi)容 -->
</div>
<div class="back lazy ">
<!-- 背面內(nèi)容 -->
</div>
</div>
</div>
正如你想到的，應(yīng)該有兩個容器，分別存放卡片“前面”和“背面”，通過CSS，我們會指定這兩個容器元素自己的作用。還有需要注意的是ontouchstart這段js，它能讓你使用觸屏來觸發(fā)翻轉(zhuǎn)動作。顯然，你應(yīng)該把這段代碼單獨提取出來，讓JavaScript代碼放到一起。
CSS代碼
我敢打賭，你會感到驚訝，只需要如此少的代碼(如果不考慮各瀏覽器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);
}</p> <p>.flip-container, .front, .back {
width: 320px;
height: 480px;
}</p> <p>/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;</p> <p> position: relative;
}</p> <p>/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;</p> <p> position: absolute;
top: 0;
left: 0;
}</p> <p>/* front pane, placed above back */
.front {
z-index: 2;
}</p> <p>/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
下面是大概的整個過程的原理：
1.在最外層的容器元素上設(shè)置整個動畫區(qū)域的透視(perspective)屬性。
2.當(dāng)外層容器元素遇到鼠標(biāo)懸停事件時，內(nèi)部存放卡片的容器旋轉(zhuǎn)180度。這里也是控制旋轉(zhuǎn)速度的地方。如果將旋轉(zhuǎn)值設(shè)置為-180deg，是反向旋轉(zhuǎn)。
3.表示卡片正面和背面的元素都要絕對定位，這樣它們才能在相同的位置相互遮擋。它們的背面可視性(backface-visibility)屬性設(shè)置為隱藏，這樣每個卡片的背面在翻轉(zhuǎn)時都是看不見的。
4.將卡片的正面設(shè)置為一個比背面要高的z-index值，這樣保證卡片的正面在最上面。
5.將背面卡片旋轉(zhuǎn)180度，這樣讓它扮演背面的角色。
6.這就是全部這些代碼的作用！你把這段代碼放到你的網(wǎng)頁里，然后修飾一下卡片的樣式就行了！
來自CSS動畫專家Ana Tudor的提示
對卡片元素的某些屬性設(shè)置一些特定的值(例如)(like overflow: hidden)會導(dǎo)致其子元素喪失3D變換功能。我認可他的觀點，因為正是在本文的例子中我正好遇到了overflow: hidden相關(guān)的麻煩，它導(dǎo)致了3D變換子元素全都出現(xiàn)在了同一個平面上，有幾個是被旋轉(zhuǎn)了180度。
觸發(fā)CSS翻轉(zhuǎn)
如果你喜歡用JavaScript來觸發(fā)翻轉(zhuǎn)動作，下面這個簡單的css樣式類就能幫你做到這樣：
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}
使用javascript給容器元素添加這個cssflip類就能觸發(fā)卡片翻轉(zhuǎn)——不需要用戶懸停鼠標(biāo)在上面。用document.querySelector("#myCard").classList.toggle("flip")實現(xiàn)它！
CSS豎向翻轉(zhuǎn)
執(zhí)行豎向翻轉(zhuǎn)也很簡單，跟橫向翻轉(zhuǎn)一樣，只需要修改一下 transform-origin的值，然后讓它按X軸旋轉(zhuǎn)。
.vertical.flip-container {
position: relative;
}</p> <p> .vertical .back {
transform: rotateX(180deg);
}</p> <p> .vertical.flip-container .flipper {
transform-origin: 100% 213.5px; /* 高的一半 */
}</p> <p> .vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
注意這里用的是rotateX，而不是之前的rotateY。
讓IE支持這種動畫技術(shù)
需要針對IE對這段標(biāo)準(zhǔn)的卡片翻轉(zhuǎn)代碼進行特殊的修改，因為IE還沒有實現(xiàn)現(xiàn)代瀏覽器中的transform功能?；镜淖龇ň褪菍φ婧捅趁鎯蓚€卡片同時分別翻轉(zhuǎn)：
/* 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);
}</p> <p>.flip-container, .front, .back {
width: 320px;
height: 480px;
}</p> <p>/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;</p> <p> position: relative;
}</p> <p>/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;</p> <p> position: absolute;
top: 0;
left: 0;
}</p> <p>/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}</p> <p>/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}</p> <p>/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}</p> <p> .vertical .back {
transform: rotateX(180deg);
}</p> <p> .vertical.flip-container:hover .back {
transform: rotateX(0deg);
}</p> <p> .vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
使用上面的這段代碼，IE10里也能正確的進行卡片翻轉(zhuǎn)了！
這個CSS卡片翻轉(zhuǎn)動畫技術(shù)一直是一個經(jīng)典的案例，代表著CSS動畫能夠?qū)崿F(xiàn)的效果，甚至3DCSS動畫能實現(xiàn)的強大效果。優(yōu)點就是使用的代碼很少很簡單。對于制作HTML5動畫來說這種效果非常的實用，可以說完美。你還能想到其它用到這個效果的地方嗎？
相關(guān)文章
- 這篇文章給大家分享的是利用純css實現(xiàn)圖片翻轉(zhuǎn)效果，對大家的學(xué)習(xí)使用CSS具有一定的參考借鑒價值，有需要的朋友們可以參考借鑒。2016-10-09
一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程
這篇文章主要為大家介紹了一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程，css3使我們能夠跳出2d空間，實現(xiàn)3維空間的動畫效果，這里給出一個自動翻轉(zhuǎn)的3d色子動畫效果制作過程2014-12-31- 這篇文章主要介紹了css3實現(xiàn)3D色子翻轉(zhuǎn)特效的制作過程及示例代碼，非常的不錯，效果也非常棒，這里推薦給大家。2014-12-23
一款利用純css3實現(xiàn)的360度翻轉(zhuǎn)按鈕的實例教程
這篇文章主要為大家介紹了利用純css3實現(xiàn)的翻轉(zhuǎn)360動畫按鈕的方法，代碼簡單易懂，實現(xiàn)出來的效果卻很美觀，需要的朋友可以過來復(fù)制代碼，順便學(xué)習(xí)一下2014-11-05- 這篇文章主要為大家介紹了利用CSS中的濾鏡效果實現(xiàn)漸變翻轉(zhuǎn)效果的代碼，不會的朋友可以和腳本之家的小編一起學(xué)習(xí)一下，以后想要實現(xiàn)漸變翻轉(zhuǎn)效果就不難啦2014-10-09
純CSS實現(xiàn)菜單、導(dǎo)航欄的3D翻轉(zhuǎn)動畫效果
隨著瀏覽器技術(shù)的進步，CSS動畫技術(shù)已經(jīng)不是只那些簡單的淡入淡出效果或幻燈片效果，它們能做很多更強大的事情2014-04-23css控制列表與導(dǎo)航的制作(水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)
這篇文章主要介紹了css控制列表與導(dǎo)航的制作,包括水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)聯(lián)列表、列表樣式等制作方法,需要的朋友可以參考下2014-04-15css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例
這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應(yīng)用,需要的朋友可以參考下2014-04-08- css 2.0還是沒有翻轉(zhuǎn)的，3.0里面有rotate屬性，這個可以把元素進行任意角度旋轉(zhuǎn)，灰常強大，下面有個不錯的示例，大家可以參考下2014-02-27
CSS Cookbook 創(chuàng)建文字導(dǎo)航菜單和翻轉(zhuǎn)特效
CSS Cookbook例子 創(chuàng)建文字導(dǎo)航菜單和翻轉(zhuǎn)特效2009-12-15