CSS3 3D导航切换代码

随着Web技术的发展，HTML5和CSS3技术在网站建设中越发普及，除此之外，由于扁平化风格设计的风靡，CSS3技术所带来的SEO搜索引擎优化收益越来越大。以色块为主的扁平化设计风格大大减少了网站的图片数量，CSS3的使用大大减少了网站中JS的调用以及大量对DOM的操作，从根本上优化网站，从而提高用户体验。在本次教程中，让我们通过CSS3 Transform属性来实现华丽的导航菜单3D转换效果。

  HTML代码
<section class="bg-color">
<nav class="sytm-effect">
<a href=" http://www.sytm.net/"><span data-hover="sytm">添美科技</span></a>
<a href=" http://www.sytm.net/wangzhanjianshe/"><span data-hover="Develop">网站建设</span></a>
<a href=" http://www.sytm.net/jiejuefangan/"><span data-hover="Design">网上商城</span></a>
<a href=" http://www.sytm.net/mobile/"><span data-hover="Mobile">移动应用</span></a>
<a href=" http://www.sytm.net/ruanjiankaifa/"><span data-hover="sytmsoft">软件开发</span></a>
</nav>
</section>
我们使用HTML5语义化标签section以及nav来进行布局，值得注意的是，我们将变化后的数据储存在了自定义属性data-hover中，从而充分实现我们所提倡的前端解耦。
CSS代码

.sytm-effect a span {
position: relative;
display: inline-block;
padding: 0 14px;
background: #2195de;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

通过CSS3 Transform属性来保留3D转换，通过CSS3 Transition属性定义变化效果时间。

.sytm-effect a span::before {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #0965a0;
content: attr（data-hover）；
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX（-90deg）；
-moz-transform: rotateX（-90deg）；
transform: rotateX（-90deg）；
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}

我们通过before这个伪类，将data-hover中的数据加入到变换的单位中，从而减少DOM的构建数量。
通过CSS3 Transform属性来定义before这个伪类的变形效果。

.sytm-effect a:hover span,
.sytm-effect a:focus span {
-webkit-transform: rotateX（90deg） translateY（-22px）；-moz-transform: rotateX（90deg） translateY（-22px）；transform: rotateX（90deg） translateY（-22px）；}
.sytm-effect a:hover span::before,
.sytm-effect a:focus span::before {
background: #28a2ee;
}

通过hover以及focus动作来定义对应的元素属性，从而实现华丽的变化效果，完成！
注：该效果只能在高级浏览器下实现，不支持IE8及以下版本浏览器。