3D的导航栏(动画)

最新推荐文章于 2023-04-11 13:26:56 发布

程序员小天仙

最新推荐文章于 2023-04-11 13:26:56 发布

阅读量660

点赞数

分类专栏：前端html 文章标签： html5 动画 z轴旋转 3d效果 css的动画

本文链接：https://blog.youkuaiyun.com/qq_35307947/article/details/81327470

版权

4 篇文章

订阅专栏

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	ul {
	padding: 0px;
	list-style: none;
	}

	ul > li {
	height: 48px;
	float: left;
	width: 120px;
	transform-style: preserve-3d;/3d效果/
	transition: all,2s;
	}
	ul > li span{
	height: 48px;
	line-height: 48px;
	width: 120px;
	text-align: center;
	position: absolute;
	display: inline-block;
	}
	ul > li span:nth-child(1){

	background-color: #5CADFF;
	transform:rotateX(90deg) translateZ(27px);

	}
	ul > li span:nth-child(2){

	background-color: purple;
	transform:translateZ(27px);

	}
	li:hover{
	transform: rotateX(-90deg);
	}

	</style>
	</head>
	<body>
	<ul>
	<li>
	<span>aaaa</span>
	<span>bbbb</span>
	</li>
	<li>
	<span>aaaa</span>
	<span>bbbb</span>
	</li>
	<li>
	<span>aaaa</span>
	<span>bbbb</span>
	</li>
	<li>
	<span>aaaa</span>
	<span>bbbb</span>
	</li>
	<li>
	<span>aaaa</span>
	<span>bbbb</span>
	</li>
	</ul>
	</body>
	</html>