CSS3制作3D旋转导航

今天给大家带来CSS3制作一个炫酷的3D导航菜单的效果，效果很赞，有需要的赶快拿走！
注：本文不涉及JS和Jquery，只是纯css。

技能提示：主要利用到CSS3的transform、transition，其他的并没有太多的技术含量，估计大家一看就明白了，接下来大家仔细看吧~

布局

	<body>
		<div id="nav">
			<ul class="nav-menu">
				<li><a href="#" class="three-d active">
				首页
					<span class="three-d-box"><span class="front">首页</span><span class="back">首页</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Fakin
					<span class="three-d-box"><span class="front">Fakin</span><span class="back">Fakin</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Fakin
					<span class="three-d-box"><span class="front">Fakin</span><span class="back">Fakin</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Fakin
					<span class="three-d-box"><span class="front">Fakin</span><span class="back">Fakin</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Fakin
					<span class="three-d-box"><span class="front">Fakin</span><span class="back">Fakin</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Fakin
					<span class="three-d-box"><span class="front">Fakin</span><span class="back">Fakin</span></span>
				</a>
					<ul class="clearfix unstyled drop-menu">
						<li><a href="#" class="three-d">
								Html5
								<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								Css3
								<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								JavaScript
								<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								Fakin
								<span class="three-d-box"><span class="front">Fakin</span><span class="back">Fakin</span></span>
							</a></li>
					</ul>
				</li>
				<li><a href="#" class="three-d">
					Fakin
					<span class="three-d-box"><span class="front">Fakin</span><span class="back">Fakin</span></span>
				</a></li>
			</ul>
		</div>
	</body>

注意，我是使用了

<ul>
<li>
 <a>
 首页
<span><span class="zheng">首页</span><span class="fan">首页</span></span>
</a>
</li>
</ul>

a标签中嵌套一个span，在这个sapn里面有两个span，分别是正面一个span和作为背面的span，但是在a标签里面还是有文本内容的，看上面的。因为你需要旋转。如果你去掉一个就会有bug哦，你可以尝试一下，等下我会给出demo的。

样式重点

因为等下会有demo的，我只给出了我认为的css重点，大家可以好好看看其中transform-style: preserve-3d;等一些重点，大家可以体会下。
transform-style详细解释：
transform-style：flat | preserve-3d

默认值：flat

适用于：变换元素

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：
flat：指定子元素位于此元素所在平面内
preserve-3d：指定子元素定位在三维空间内

说明：
指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <’ transform-style '> 属性。
对应的脚本特性为transformStyle。

兼容性：transform-style兼容性除了IE10以下都兼容。

扩展：那它还能做啥？只能3D菜单？，理论上来说，网页内的3D的东西都可以，但是实际（你懂的）。

举个例子：
CSS3制作3D旋转导航

Demo