## 图片滑过翻转效果 > 效果如图  **原理：利用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; } ```