使用純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 > 50 <div >1號正面</div> 51 <div >1號反面</div> 52 </div> 53 <div > 54 <div >2號正面</div> 55 <div >2號反面</div> 56 </div> 57 <div > 58 <div >3號正面</div> 59 <div >3號反面</div> 60 </div> 61 <div > 62 <div >4號正面</div> 63 <div >4號反面</div> 64 </div> 65 </body> 66 67 </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14781.html
標籤：Html/Css
下一篇：Web 創建設計