3d-导航栏制作（导航栏上下翻转）

最新推荐文章于 2021-09-03 21:54:04 发布

纵马且长歌

最新推荐文章于 2021-09-03 21:54:04 发布

阅读量1.7k

点赞数 3

分类专栏： Web

本文链接：https://blog.csdn.net/no2015214099/article/details/77430734

版权

Web 专栏收录该内容

18 篇文章 9 订阅

订阅专栏

嗯。。。将前段时间学的CSS 3d-翻转的导航栏代码传上来吧。

<!DOCTYPE html>
<html>
<head>
	<title>
		翻转导航栏
	</title>
	<meta charset="utf-8">
	<style type="text/css">
	body{
		margin: 0px;
		padding: 0px;
	}
	nav{
		width: 980px;
		margin: 50px auto;
		background-color: #efefef;
		
	}
	nav:after{
		display: block;
		clear:both;
		overflow: hidden;
		content: "";
	}
	nav .item{
		width: 200px;
		height: 100px;
		margin-right: 5px;
		float: left;
		perspective: 6000px;
	}
	nav .item a{
		display: block;
		height: 100px;
		text-decoration: none;
		transition: all .5s; 
		transform-style: preserve-3d;
	}
	nav .item a p{
		height: 100px;
		margin: 0;
		line-height: 100px;
		font-size: 20px;
		font-family: "Microsoft Yahei";
		text-align: center;
		color: #fff;
		border-radius:2px;
		transition: all .5s;
	}
	nav .item a p:first-child{
		background-color: orange;
		transform: translateZ(50px) ;
	}
	nav .item a p:last-child{
		background-color: #1571fa;
		transform: translateZ(50px) rotateX(-90deg);
		margin-top: -50px;
	}
	nav .item a:hover{
		transform: rotateX(90deg);
	}
	nav .item a:hover p:last-child{
		margin-top: 0px;
		transform: translateZ(0px) rotateX(-90deg);
	}
	</style>
	
</head>
<body>
	<nav class="dh">
	<div class="item">
		<a href="#" >
			<p>Home</p>
			<p>首页</p>
		</a>
	</div>
	<div class="item">
		<a href="#" >
			<p>Content</p>
			<p>目录</p>
		</a>
	</div>
	<div class="item">
		<a href="#" >
			<p>About Us</p>
			<p>关于我们</p>
		</a>
	</div>
	</nav>

</body>
</html>