IE也實現了 CSS圖片翻轉動畫技術詳解
CSS動畫非常的有趣；這種技術的美就在于，通過使用很多簡單的屬性，你能創建出就連皮克斯動畫制作公司也會贊嘆的漂亮的消隱效果 。其中代表性的一種就是CSS圖片翻轉效果，能讓你看到一張卡片的正反兩面上的內容 。本文就是要用最簡單的方法向大家介紹如何創建這種效果 。
簡單說明：這并不是第一篇我介紹這種技術的文章，但我發現那些都過于復雜了 。網上還有很多其它的教材 ， 但里面添加了很多多余的代碼樣式，需要讀者去分清哪些是必要的，那些是無用的；本文避免了這些問題，只列出了必要的CSS代碼，你可以在其上添加自己喜歡的風格來美化這些卡片 。
HTML代碼
實現正反面效果的HTML代碼，估計你也能想到應該是這樣的：
復制代碼代碼如下:
div class="flip-container lazy " ontouchstart="this.classList.toggle(’hover’);"
div class="flipper lazy "
div class="front lazy "
!-- 前面內容 --
/div
div class="back lazy "
!-- 背面內容 --
/div
/div
/div
正如你想到的，應該有兩個容器 ， 分別存放卡片前面和背面，通過CSS，我們會指定這兩個容器元素自己的作用 。還有需要注意的是ontouchstart這段js ， 它能讓你使用觸屏來觸發翻轉動作 。顯然，你應該把這段代碼單獨提取出來，讓JavaScript代碼放到一起 。
【IE也實現了 CSS圖片翻轉動畫技術詳解】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);
}/pp.flip-container, .front, .back {
width: 320px;
height: 480px;
}/pp/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;/pp position: relative;
}/pp/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;/pp position: absolute;
top: 0;
left: 0;
}/pp/* front pane, placed above back */
.front {
z-index: 2;
}/pp/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
下面是大概的整個過程的原理：
1.在最外層的容器元素上設置整個動畫區域的透視(perspective)屬性 。
2.當外層容器元素遇到鼠標懸停事件時，內部存放卡片的容器旋轉180度 。這里也是控制旋轉速度的地方 。如果將旋轉值設置為-180deg，是反向旋轉 。
3.表示卡片正面和背面的元素都要絕對定位 ， 這樣它們才能在相同的位置相互遮擋 。它們的背面可視性(backface-visibility)屬性設置為隱藏，這樣每個卡片的背面在翻轉時都是看不見的 。
4.將卡片的正面設置為一個比背面要高的z-index值 ， 這樣保證卡片的正面在最上面 。
5.將背面卡片旋轉180度，這樣讓它扮演背面的角色 。
6.這就是全部這些代碼的作用！你把這段代碼放到你的網頁里，然后修飾一下卡片的樣式就行了！
來自CSS動畫專家Ana Tudor的提示
對卡片元素的某些屬性設置一些特定的值(例如)(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給容器元素添加這個cssflip類就能觸發卡片翻轉不需要用戶懸停鼠標在上面 。用document.querySelector(#myCard).classList.toggle(flip)實現它！
CSS豎向翻轉
執行豎向翻轉也很簡單，跟橫向翻轉一樣，只需要修改一下 transform-origin的值，然后讓它按X軸旋轉 。
復制代碼代碼如下:
.vertical.flip-container {
position: relative;
}/pp .vertical .back {
transform: rotateX(180deg);
}/pp .vertical.flip-container .flipper {
transform-origin: 100% 213.5px; /* 高的一半 */
}/pp .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);
}/pp.flip-container, .front, .back {
width: 320px;
height: 480px;
}/pp/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;/pp position: relative;
}/pp/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;/pp position: absolute;
top: 0;
left: 0;
}/pp/*UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}/pp/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}/pp/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}/pp .vertical .back {
transform: rotateX(180deg);
}/pp .vertical.flip-container:hover .back {
transform: rotateX(0deg);
}/pp .vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
使用上面的這段代碼，IE10里也能正確的進行卡片翻轉了！
這個CSS卡片翻轉動畫技術一直是一個經典的案例，代表著CSS動畫能夠實現的效果，甚至3DCSS動畫能實現的強大效果 。優點就是使用的代碼很少很簡單 。對于制作HTML5動畫來說這種效果非常的實用，可以說完美 。你還能想到其它用到這個效果的地方嗎？
