css3 -preserve-3d案例
阿新 • • 發佈：2019-01-06
程式碼：
html
<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">The Front</span>
<span class="panel back">The Back</span>
</span>
</div>
style:
.flipper { height: 100px; width: 100px; margin:0 auto; perspective: 400px; //父元素設定視距，越大3d效果越不明顯 position: relative; //這裡給子元素做定位參考 } .flipper-object { position: absolute; transition: transform 1s; transform-style: preserve-3d; // 這個一定要設定 } .panel { top:0; position: absolute; backface-visibility: hidden; //背面隱藏 } .flipper-vertical .back { //下面這四個類決定是上下翻轉，還是左右翻轉 transform: rotateX(180deg) } .filter-horizontal .back { transform: rotateY(180deg) } .flipper:hover .flipper-vertical { transform: rotateX(180deg) } .flipper:hover .flipper-horizontal { transform: rotateX(180deg) }
完整程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>transform3D變換</title> <style> .flipper { height: 100px; width: 100px; margin:0 auto; perspective: 400px; position: relative; } .flipper-object { position: absolute; transition: transform 1s; transform-style: preserve-3d; } .panel { top:0; position: absolute; backface-visibility: hidden; } .flipper-vertical .back { transform: rotateX(180deg) } .filter-horizontal .back { transform: rotateY(180deg) } .flipper:hover .flipper-vertical { transform: rotateX(180deg) } .flipper:hover .flipper-horizontal { transform: rotateX(180deg) } </style> </head> <body> <div class="flipper"> <span class="flipper-object flipper-vertical"> <span class="panel front">The Front</span> <span class="panel back">The Back</span> </span> </div> </body> </html>