Html
    Css
    Js
.mynav {
	width:800px;
	margin:50px auto;
	display:inline-block;
}
.mynav .item {
	width:200px;
	height:100px;
	float:left;
	perspective:4000px;
	-webkit-perspective:4000px;
	margin-right:8px;
}
.mynav .item a {
	text-decoration:none;
	display:block;
	height:100px;
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
	transition:all 1s;
	-webkit-transition:all 1s;
}
.mynav .item a:hover {
	transform:rotateX(90deg);
	-webkit-rotateX(90deg);
}
.mynav .item a p {
	text-align:center;
	line-height:100px;
	height:100px;
	font-family:"微软雅黑";
	color:white;
	font-size:20px;
	margin:0px;
	border-radius:3px;
}
.mynav .item a p:first-child {
	background-color:coral;
	transform:translateZ(50px);
}
.mynav .item a p:last-child {
	background-color:#d655ff;
	transform:rotateX(-90deg) translateZ(-50px);
	-webkit-transform:rotateX(-90deg) translateZ(-50px);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

导航栏立体翻转效果

0