小莫碎碎念
小莫見到很多網站的圖片翻轉效果很炫，忍不住手癢癢，遂摩拳擦掌打算研究一番，無奈17素材網上很多成型的插件都比較復雜，不適合小莫這樣的小白，所以找到一個簡單的栗子趕緊拿來和眾小白分享，大神請繞路，大神請繞路，大神請繞路，重要的事情說三遍！
雖然小莫研究了一番，但自我感覺還沒吃到css3的精髓，下面只是小莫一些淺顯的理解，如有紕漏，還望眾小白海涵，眾大神不吝賜教。
由於是直接從網上找的栗子，所以直接上干貨，省略實現思路這一模塊。
最終代碼
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 /* entire container, keeps perspective */ 7 .flip-container { 8 border: 1px solid black; 9 -webkit-perspective: 600px; 10 -moz-perspective: 600px; 11 } 12 /* flip the pane when hovered */ 13 .flip-container:hover .flipper { 14 transform: rotateY(180deg); 15 -moz-transform:rotateY(180deg); /* Firefox */ 16 } 17 18 .flip-container, .front, .back { 19 width: 320px; 20 height: 320px; 21 } 22 23 /* flip speed goes here */ 24 .flipper { 25 transition: 0.6s; 26 transform-style: preserve-3d; 27 -moz-transform-style: preserve-3d; 28 position: relative; 29 } 30 31 /* hide back of pane during swap */ 32 .front, .back { 33 line-height:320px; 34 color:#ffffff; 35 text-align: center; 36 font-size: 24px; 37 38 backface-visibility:hidden; 39 -webkit-backface-visibility:hidden; /* Chrome 和 Safari */ 40 -moz-backface-visibility:hidden; /* Firefox */ 41 position: absolute; 42 top: 0; 43 left: 0; 44 } 45 46 /* front pane, placed above back */ 47 .front { 48 background-color: #4cae4c; 49 } 50 51 /* back, initially hidden pane */ 52 .back { 53 background-color: #5bc0de; 54 transform: rotateY(180deg); 55 -moz-transform:rotateY(180deg); /* Firefox */ 56 } 57 </style> 58 59 </head> 60 <body> 61 <div class="flip-container"> 62 <div class="flipper"> 63 <div class="front"> 64 front 65 </div> 66 <div class="back"> 67 back 68 </div> 69 </div> 70 </div> 71 </body> 72 </html>
代碼分析
首先，先來科普幾個官方定義：
perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。通俗點說就是父元素添加這個屬性后，子元素可以呈現3D的效果。比方說像下面左圖介樣，如果不設置它，就會像右邊介樣：
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。也就是說我們的動畫效果主要是依靠它滴，這是一個神奇的屬性，只有你想不到的沒有它做不到的！（誇張手法，誇張手法，見諒見諒）
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性。簡單來說這是翻轉動畫的執行者。
transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素。這個屬性可以有兩種值：flat，子元素將不保留其 3D 位置（也就是說，當transform-style為flat的時候，再對其子元素改變3D位置則不起作用）；preserve-3d子元素將保留其 3D 位置。
backface-visibility 屬性定義當元素不面向屏幕時是否可見。
好，下面小莫課堂正式開課啦！
既然要實現翻轉效果，那首先要定義一個雙面div，默認顯示正面，鼠標hover顯示反面，鼠標離開則顯示正面，但在這之前我們需要一個裝雙面div的盒子，就像下面這樣：
1 <div class="flip-container"> 2 3 </div> 4 <style> 5 .flip-container { 6 border: 1px solid black; /*純屬為了方便查看效果而定義*/ 7 -webkit-perspective: 600px; /*加上這個屬性，盒子的子元素就能有3D效果了，不然只能是一個被壓扁的盒子*/ 8 -moz-perspective: 600px; 9 } 10 </style>
盒子有了，下面就要定義雙面div了，就像一張撲克牌，雖然有兩面但它仍舊是一個整體，我們來定義一張撲克牌...呃，定義一個雙面div：
1 <div class="flipper"> 2 3 </div> 4 <style> 5 .flip-container { 6 width: 320px; 7 height: 320px; 8 line-height:320px; 9 color:#ffffff; 10 text-align: center; 11 font-size: 24px; 12 13 transition: 0.6s; /*雙面div翻轉效果的時間*/ 14 transform-style: preserve-3d; /*雙面div的子元素可保持其3D位置*/ 15 -moz-transform-style: preserve-3d; 16 position: relative; 17 } 18 </style>
下面就是撲克牌的正反面，也就是雙面div正反面的內容：
1 <div class="front"> 2 front 3 </div> 4 <div class="back"> 5 back 6 </div> 7 <style> 8 .front, .back { 9 line-height:320px; 10 color:#ffffff; 11 text-align: center; 12 font-size: 24px; 13 14 backface-visibility:hidden; /*div背對屏幕時不可見*/ 15 -webkit-backface-visibility:hidden; /* Chrome 和 Safari */ 16 -moz-backface-visibility:hidden; /* Firefox */ 17 position: absolute; 18 top: 0; 19 left: 0; 20 } 21 22 .front { 23 background-color: #4cae4c; 24 } 25 26 .back { 27 background-color: #5bc0de; 28 transform: rotateY(180deg); /*反面內容初始化為背對着屏幕的*/ 29 -moz-transform:rotateY(180deg); /* Firefox */ 30 } 31 </style>
盒子、雙面div、正反面內容都有了，萬事俱備只欠“翻轉”這個東風啦：
1 .flip-container:hover .flipper { 2 transform: rotateY(180deg); 3 -moz-transform:rotateY(180deg); /* Firefox */ 4 }
當鼠標hover到盒子上則執行過度動畫，這里沒有把hover加到雙面div上是因為，雙面div在旋轉過程中元素的位置大小都會發生變化：
到此為止，翻轉功能就算是圓滿啦！
小莫在找栗子的時候還找到了另一個品相不太好的栗子，就是不給雙面div加翻轉動作，而將翻轉動作加到正反面div上，在只有正反面的時候這樣做顯然有些累贅，但如果是多面內容可能就不同，這種方法或許更靈活些，當然現在小莫的技能還沒點到那個級別，多面翻轉的功能留着日后實現吧！
總結
一入css3深似海，從此XX是路人！（這里XX泛指各種動畫插件，請自行腦補。）為什么總覺得沒有個總結就不算是寫完了呢？這是個不好的習慣，咳咳。（寫小說湊字數留下的惡習，見諒見諒）