backface-visibility翻转的图片

本文主要是介绍backface-visibility翻转的图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML代码：

<div class="overturn"><img src="images/bread2.jpg" alt=""><img src="images/bread3.jpg" alt="">
</div>

CSS代码：

.overturn {width: 157px;height: 170px;overflow: hidden;margin: 20px auto;position: relative;perspective: 1000px; /*定义3D元素距视图的距离，子元素获得透视效果*/
}
.overturn img {position: absolute;top: 0;left: 0;transition: all 1s;
}
.overturn img:first-child {z-index: 1;backface-visibility: hidden; /*隐藏被旋转的元素的背面*/
}
.overturn:hover img {transform: rotateY(180deg);
}

实现效果：

这篇关于backface-visibility翻转的图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---