使用純CSS3 實現翻牌效果 需要註意要給子盒子使用絕對定位，這樣兩個盒子可以完全重合在一起，需要給父盒子一個 transform-style: preserve-3d;讓子盒子翻轉時保持3D效果， perspective: 400px;可以給父盒子一個視距遵守近大遠小規則可根據需要設置。 tran ...
使用純CSS3 實現翻牌效果 需要註意要給子盒子使用絕對定位，這樣兩個盒子可以完全重合在一起，需要給父盒子一個
transform-style: preserve-3d;讓子盒子翻轉時保持3D效果， perspective: 400px;可以給父盒子一個視距遵守近大遠小規則可根據需要設置。 transition: all 0.3s;使用延遲效果更好觀察動畫
當滑鼠放上時就會旋轉
以下代碼直接複製即可使用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .card { 10 position: relative; 11 transform-style: preserve-3d; 12 float: left; 13 perspective: 400px; 14 perspective: 180px; 15 width: 150px; 16 height: 150px; 17 margin: 100px 20px; 18 transition: all 0.3s; 19 } 20 21 .card:hover { 22 transform: rotateY(-180deg); 23 } 24 25 .cover, 26 .back { 27 position: absolute; 28 width: 100%; 29 height: 100%; 30 border-radius: 50%; 31 font-size: 25px; 32 text-align: center; 33 line-height: 150px; 34 } 35 36 .cover { 37 background-color: purple; 38 transform: rotateY(180deg); 39 } 40 41 .back { 42 z-index: 1; 43 background-color: pink; 44 } 45 </style> 46 </head> 47 48 <body> 49 <div class="card"> 50 <div class="cover">1號正面</div> 51 <div class="back">1號反面</div> 52 </div> 53 <div class="card"> 54 <div class="cover">2號正面</div> 55 <div class="back">2號反面</div> 56 </div> 57 <div class="card"> 58 <div class="cover">3號正面</div> 59 <div class="back">3號反面</div> 60 </div> 61 <div class="card"> 62 <div class="cover">4號正面</div> 63 <div class="back">4號反面</div> 64 </div> 65 </body> 66 67 </html>
