html+css3 3d导航栏

最新推荐文章于 2025-12-06 19:48:00 发布

原创最新推荐文章于 2025-12-06 19:48:00 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

效果图
参考于https://www.bilibili.com/video/BV1xq4y1q7jZ?p=37
如有侵权还请速速联系
3d导航
1.html部分

<div class="navs">
			<ul>
				<li>
					<a href="#">首页</a>
					<a href="#">Index</a>
				</li>
				<li>
					<a href="#">登陆</a>
					<a href="#">Login</a>
				</li>
				<li>
					<a href="#">注册</a>
					<a href="#">Register</a>
				</li>
			</ul>
		</div>

2.css部分

.navs ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.navs{
				width: 300px;
				height: 40px;
				margin: 20px;
				
			}
			.navs li{
				position: relative;
				float: left;
				width: 100px;
				height: 40px;
				line-height: 40px;
				transition: all .5s;
				transform-style:preserve-3d ;
				/* 为了更方便观察 */
			/* 	transform: rotateX(-20deg) rotateY(30deg); */
			/* 测试3d缩放效果 */
				/* transform: scale3d(0.5,1.1,2); */
			}
			.navs li a{
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				text-align: center;
				text-decoration: none;
				color: #FFFFFF;
			}
			.navs li a:first-child{
				background-color: green;
				transform: translateZ(20px);
			}
			.navs li a:last-child{
				background-color: orange;
				/* 躺平x轴旋转 立方体的顶部，位移z(确保看到这个盒子) */
				transform: rotateX(90deg) translateZ(20px);
			}
			/* li:hover 让立方体旋转 */
			.navs li:hover{
				transform:rotateX(-90deg);
			}