## 圖片滑過翻轉效果 > 效果如圖  **原理：利用transform: rotateY以及backface-visibility: hidden 使元素不面向屏幕時不可見實現** **附：rotateY：沿Y軸旋轉; rotateX：沿x軸旋轉；rotateZ：沿中心旋轉（類似轉盤抽獎）** >html代碼 ``` <div class="container"> <div class="front"><img src="images/image-01.jpg" alt=""></div> <div class="back"><img src="images/image-02.jpg" alt=""></div> </div> ``` >css代碼 ``` .container { position: relative; //給container一個相對定位,其中兩個子div絕對定位，使之重疊 width: 300px; } img { width: 300px; } .container>div { position: absolute; left: 0; top: 0; backface-visibility: hidden; //當元素不面向屏幕時，不可見 } .front { transform: rotateY(0deg); } .back { transform: rotateY(-180deg) } .container:hover .front { transform: rotateY(180deg); } .container:hover .back { transform: rotateY(0deg); } //兩個圖片都設置了滑過翻轉，一個從0-180deg，一個從-180-0deg .front, .back { transition: all 1s; } ```