css3 卡牌翻轉效果
阿新 • • 發佈：2020-07-01
利用hover控制動畫，一個從反面向正面翻，一個從正面向反面翻。
利用：backface-visibility: hidden;控制反面的元素不顯示。
不支援的瀏覽器直接切換層級換圖（部分ie9模擬器不支援）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css3雙面翻轉</title> </head> <style> *{margin: 0; padding:0;} img{ width: 100%; height: 100%; } .card-content{ width: 295px; height: 295px; margin: 0 auto; } .inner { display: block; position: relative; width: 100%; height: 100%; -webkit-transform: perspective(1000px); -moz-transform: perspective(1000px); -ms-transform: perspective(1000px); -o-transform: perspective(1000px); transform: perspective(1000px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .front, .back{ width: 100%; height: 100%; position:absolute;top: 0px;left: 0px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; transition: 0.6s; cursor: pointer; } .front { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg) } .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg) } .card-content:hover .inner .back{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .card-content:hover .inner .front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } </style> <body> <div class="card-wrapper"> <div class="card-content"> <a class="inner" href="#"> <div class="front"> <img src="./images/mobile_2.jpg" alt=""> </div> <div class="back"> <img src="./images/mobile_1.jpg" alt=""> </div> </a> <p>這裡可以做一些描述的文案</p> </div> </div> </body> </html>