css3 登录注册页面翻转

最新推荐文章于 2024-01-24 23:43:38 发布

说学逗唱攻城狮

最新推荐文章于 2024-01-24 23:43:38 发布

阅读量314

点赞数

分类专栏： css 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_34720531/article/details/125083648

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container {
				perspective: 1000;
				transform-style: preserve-3d;
			}

			.flip {
				transition: 0.6s;
				transform-style: preserve-3d;
			}

			.container,
			.front,
			.back {
				width: 380px;
				height: 270px;
			}

			.flip {
				position: relative;
				transition: 0.6s;
				transform-style: preserve-3d;
			}

			.front,
			.back {
				position: absolute;
				top: 0px;
				left: 0px;
				backface-visibility: hidden;
			}

			.front {
				z-index: 2;
				background-color: #52ACF7;
			}

			.back {
				transform: rotateY(-180deg);
				background-color: red;
			}
			/* 重点 */
			.container:hover .flip {
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="flip">
				<div class="front">
					前面
				</div>
				<div class="back">
					后面
				</div>
			</div>
		</div>
	</body>
</html>