backface-visibility翻转的图片

最新推荐文章于 2024-07-03 22:55:16 发布

每一天，每一步

最新推荐文章于 2024-07-03 22:55:16 发布

阅读量114

点赞数

分类专栏： HTML/CSS 文章标签： html css css3

本文链接：https://blog.csdn.net/u010234868/article/details/115450119

版权

HTML/CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

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);
}