CSS3 3D 翻牌效果

用CSS3來做3D的翻牌效果，這個效果很不錯，有興趣可以記一下怎麼做。

Demo

首先準備類似下面的html

view plaincopy to clipboardprint

1. <div id="f1_container">  
2. <div id="f1_card">  
3.   <div class="front face">  
4.     <img src="filpcard.jpg"/>  
5.   </div>  
6.   <div class="back face">  
7.     <p>內容放這邊</p>  
8.   </div>  
9. </div>  
10. </div>  

大致看一下就知道要做翻牌效果，要有兩層疊在一起的div，然後當滑鼠滑過去後讓他翻轉就可以了。
css像這樣設

view plaincopy to clipboardprint

1. #f1_container {   
2.   position: relative;   
3.   margin: 10px auto;   
4.   width: 400px;   
5.   height: 300px;   
6.   z-index: 1;   
7. }   
8. #f1_container {   
9.   perspective: 1000;   
10. }   
11. #f1_card {   
12.   width: 100%;   
13.   height: 100%;   
14.   transform-style: preserve-3d;   
15.   transition: all 0.5s linear;   
16. }   
17. #f1_container:hover #f1_card {   
18.   transform: rotateX(180deg);   
19. }   
20. .face {   
21.   position: absolute;   
22.   width: 100%;   
23.   height: 100%;   
24.   backface-visibility: hidden;   
25. }   
26. .face.back {   
27.   display: block;   
28.   transform: rotateX(180deg);   
29.   box-sizing: border-box;   
30.   padding: 10px;   
31.   color: white;   
32.   background-color: #000;   
33. }  

要改變翻牌方向只要改rotate的坐標軸就可以了。

一些比較少見的css說明
CSS3 backface-visibility Property
CSS3 perspective Property
CSS3 transform-style Property

參考
Flipping content