3D导航栏

我的调皮小妖精…

于 2022-06-28 11:30:32 发布

阅读量391

点赞数

分类专栏： css3 文章标签： 3d css3 css

本文链接：https://blog.csdn.net/weixin_45753588/article/details/125499089

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

3D导航栏效果实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul {
				margin: 100px;
			}

			ul li {
				width: 120px;
				height: 35px;
				list-style: none;
				perspective: 500px;//需要
			}

			.box {
				width: 100%;
				height: 100%;
				position: relative;
				text-align: center;
				line-height: 35px;
				transform-style: preserve-3d;//需要
			}

			.box:hover {
				transform: rotateX(90deg);
				transition: all .4s;
			}

			.front,
			.buttom {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.front {
				background-color: pink;
				z-index: 1;
				transform: translateZ(17.5px);
			}

			.buttom {
				background-color: darkcyan;
				transform: translateY(17.5px) rotateX(-90deg);
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<div class="box">
					<div class="front">正面</div>
					<div class="buttom">反面</div>
				</div>
			</li>
			<li>
				<div class="box">
					<div class="front">正面</div>
					<div class="buttom">反面</div>
				</div>
			</li>
			<li>
				<div class="box">
					<div class="front">正面</div>
					<div class="buttom">反面</div>
				</div>
			</li>
			<li>
				<div class="box">
					<div class="front">正面</div>
					<div class="buttom">反面</div>
				</div>
			</li>
		</ul>
	</body>
</html>