css3 3D导航

本文由清尘发表于2015-08-29 10:10最后修改于2016-01-29属于HTML/CSS分类

点击查看演示

HTML代码:


<ul class="nav">
	<li>
		<a href="" class="item">测试
			<span class="three_dbox">
				<span class="front">测试</span>
				<span class="back">测试</span>
			</span>
		</a>
	</li>
	<li>
		<a href="" class="item">测试
			<span class="three_dbox">
				<span class="front">测试</span>
				<span class="back">测试</span>
			</span>
		</a>
	</li>
	<li>
		<a href="" class="item">测试
			<span class="three_dbox">
				<span class="front">测试</span>
				<span class="back">测试</span>
			</span>
		</a>
	</li>
	<li>
		<a href="" class="item">测试
			<span class="three_dbox">
				<span class="front">测试</span>
				<span class="back">测试</span>
			</span>
		</a>
	</li>
</ul>

CSS代码:

ul,li{list-style:none; margin:0; padding:0;  box-sizing:border-box;}
.nav{background:#000; }
.nav li{display:inline-block;}
.nav a{color:#fff; text-decoration:none; font-size:24px; line-height:20px; font-weight:bold; display:block; padding:15px 10px;}
.item{position:relative; perspective: 200px;}
.three_dbox,.front,.back{width:100%; height:100%; position:absolute; top:0; left:0; padding:15px 10px; background:#000; box-sizing:border-box;}
.three_dbox{transform-style: preserve-3d; transform: translateZ(-25px); transition: all .3s;}
.item:hover .three_dbox{transform: translateZ(-25px) rotateX(90deg);}
.front,.back{transform: translateZ(25px);}
.front{transform: rotateX(0deg) translateZ(25px);}
.back{transform: rotateX(-90deg) translateZ(25px);}