CSS3 3D 翻牌效果

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

Demo

首先準備類似下面的html
  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像這樣設
  1. #f1_container {   
  2.   positionrelative;   
  3.   margin10px auto;   
  4.   width400px;   
  5.   height300px;   
  6.   z-index1;   
  7. }   
  8. #f1_container {   
  9.   perspective: 1000;   
  10. }   
  11. #f1_card {   
  12.   width100%;   
  13.   height100%;   
  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.   positionabsolute;   
  22.   width100%;   
  23.   height100%;   
  24.   backface-visibilityhidden;   
  25. }   
  26. .face.back {   
  27.   displayblock;   
  28.   transform: rotateX(180deg);   
  29.   box-sizing: border-box;   
  30.   padding10px;   
  31.   colorwhite;   
  32.   background-color#000;   
  33. }  
要改變翻牌方向只要改rotate的坐標軸就可以了。

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

參考
Flipping content

留言