第一種方式：
首先，我們在html中有這樣一個布局：
不要小看外面那個div，它可是本次內容不可少的呢，沒了它，后面的效果就沒法實現了呢!局布好了，接下來就要開始搞樣式了。最先要搞的肯定是外面的哈，給它一個width,height,大少各位大神自己定吧，小妹我這就先給它定個200*200吧。外面的搞定了，里面的也要開始了，這里都是給200*200。此時在瀏覽器中一看發現div1和div2是上下顯示的，一個上一個下，這就對了，要知道div是塊元素，它要占據一整行的呢，但這對我們之前說的前后肯定是有矛盾的，不要急，給它一個絕對定位position: absolute;這樣兩個div的中心就重合啦。為了區別兩個div,這里我們要分別給它們不一樣的背景色。前期準備工作都差不搞定了，接下來我們來看看怎么樣實現效果吧！
我們是要實現翻牌效果，一聽就知道肯定是要有旋轉的，這就要用到css3里的新屬性transform:rotateY(?deg);有人有可能會問為什么是rotateY呢，這你就不知道了吧，翻牌，當然是沿著Y軸轉啊，哈哈！所以當鼠標移到div上時我們就要讓它實現旋轉效果，那么此時外層div的用處就來啦，不管用哪個小div都無法讓它們同時發生旋轉，除非我們的鼠標是點在外面那個div上，于是就有這個代碼了，
.outer:hover .div1{
transform:rotateY(-180deg);
}
.outer:hover .div2{
transform:rotateY(0deg);
}
旋轉是有了，可是沒有任何過渡效果的旋轉看起來是很難看的，所以在這里，我們要給它們一個過渡效果，就要用到css3里的新屬性transition:all 2s;此處的all是它所有的效果都過渡。講到這里我們其實一直都沒處理一件事，那就是怎么讓當前面的旋轉到后面，后面的緊跟其后出現， 這就是backface-visibility:hidden;一個在圖片變換里很重要的一個屬性，它的意思是當圖片轉到顯示屏看不見的地方就消失了。就是說本來是正面的， 我們能看么到，但是當它沿著Y軸轉180度后我們就不能看到它了，如果不加這個屬性我們是能看到旋轉后的反圖片的，加了它就看不到了。所以我們要把這個屬性加到兩個小div上。而且為了實現此效果，我們在開始的時候還得讓兩個小div一個沒有旋轉，我們能看到，另一個也就是在背后的那個放轉180度，這樣當第一個div 開始旋轉后我們就不會立即看到第二個div，而是等它旋轉到看不到的地方，第二個div 才會出現。具體代碼如下所示：
第二種方式：
翻牌的原理：
1、父容器設置設置perspective，讓其子元素支持3d透視。
注：perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
2、牌正面和背面設置absolute屬性，讓正面的背面處于同一水平線上，用z-index屬性設置背面朝上
3、讓背面設置translateY(180)，沿y軸旋轉180度，背面朝后，backface-visibility屬性讓背對屏幕的時候隱藏隱藏。
4、hover屬性，當鼠標經過flip_wrap時，讓flip沿y軸旋轉180度，讓正面繞y軸旋轉180度到背面隱藏，背面沿y軸旋轉180轉到正面來。
原理就是這樣，下面就開始看具體代碼吧。
.flip_wrap{width:210px;height:220px;margin:0 auto;perspective:800px;/*perspective屬性定義3D元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。*/-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;-o-perspective:800px;}
.flip{width:210px;height:220px;backface-visibility:hidden;/*背對屏幕時隱藏*/-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;transition:all 1s ease;/*為翻牌添加過渡效果*/-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transform-style:preserve-3d;/*子元素將保留其 3D 位置。*/}
.side{width:100%;height:100%;position:absolute;/*讓背面和正面重疊*/left:50%;margin-left:-105px;}
.front{z-index:2;/*讓正面朝上*/}
.back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);}.flip_wrap:hover .flip{transform:rotateY(180deg);(180);
-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);}
翻牌body,div{margin:0;padding:0;}.flip_wrap{width:210px;height:220px;margin:0 auto;perspective:800px;/*perspective屬性定義3D元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。*/-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;-o-perspective:800px;}.flip{width:210px;height:220px;backface-visibility:hidden;/*背對屏幕時隱藏*/-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;transition:all 1s ease;/*為翻牌添加過渡效果*/-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transform-style:preserve-3d;/*子元素將保留其 3D 位置。*/}.side{width:100%;height:100%;position:absolute;/*讓背面和正面重疊*/left:50%;margin-left:-105px;}.front{z-index:2;/*讓正面朝上*/}.back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);}.flip_wrap:hover .flip{transform:rotateY(180deg);(180);
-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);}
