翻牌效果css

最新推荐文章于 2024-08-07 17:18:04 发布

catherinawwww

最新推荐文章于 2024-08-07 17:18:04 发布

阅读量286

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_38747509/article/details/118607972

版权

CSS 3D转换翻转效果过渡动画前端开发

关键词由CSDN通过智能技术生成

<html>
<head>
<meta charset="UTF-8">
<title>翻牌</title>
<style type="text/css">
*{margin:0;padding:0;}
.flip_wrap{
	width:454px;
	height:454px;
	margin:100px auto;
	perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/
}
.flip{
	width:454px;
	height:454px;
	backface-visibility:hidden;/*背对屏幕时隐藏*/
	transition: all 1s ease; /*为翻牌添加过渡效果*/
	transform-style: preserve-3d; /*子元素将保留其 3D 位置。*/
}
.side{
	width:100%;
	height:100%;
	position: absolute;/*让背面和正面重叠*/
	left:50%;
	margin-left:-227px;
}
.front{
	z-index:2;/*让正面朝上*/
}
.back{
	transform:rotateY(180deg);
}
.flip_wrap:hover .flip{
	transform:rotateY(180deg);
}
</style>
</head>
<body>
	<div class="flip_wrap"><!-- 大容器 -->
		<div class="flip"><!-- 实现翻牌容器 -->
			<div class="side front"><!-- 牌正面 -->
				<!-- <div style="background:red"></div> -->
				<img src="images/4.png"> 
			</div>
			<div class="side back"><!-- 牌背面 -->
				<!-- <div style="background:blue"></div> -->
				<img src="images/3.png"> 
			</div>
		</div>
	</div>
</body>
</html>