翻牌效果

最新推荐文章于 2023-09-01 17:33:01 发布

小森呀

最新推荐文章于 2023-09-01 17:33:01 发布

阅读量910

点赞数

分类专栏：小案例

本文链接：https://blog.csdn.net/KEY2018/article/details/94154996

版权

小案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>翻牌效果</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.main{
			width: 500px;
			height: 500px;
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			margin: auto;
			perspective: 2000px;
		}
		.main div{
			width: 100%;
			height: 100%;
			background-color: green;
			transition: all linear 1s;
			backface-visibility: hidden;
			text-align: center;
			line-height: 500px;
		}
		.b{
			transform: rotateY(180deg);
			position: relative;
			top:-100%;
			left: 0px;
		}
		.main:hover .a{
			transform: rotateY(-180deg);
		}
		.main:hover .b{
			transform: rotateY(0deg);
		}
	</style>
</head>
<body>
<div class="main">
	<div class="a">正面</div>
	<div class="b">反面</div>
</div>
</body>
</html>