前言

使用纯css实现3D导航栏，这种导航栏优点在于相对于其他平面导航，这种导航增加了3D效果，对于用户来说体验更好，缺点在于代码繁琐，所需时间成本较高，并且不能兼容ie浏览器

效果图：

---

一、基本框架

先创建一个大的div，将长方体的上下左右前后的四个面“包住”

<div id="father-1"> <div id="son-front-1">小谭</div> <div id="son-rear-1"></div> <div id="son-left-1"></div> <div id="son-right-1"></div> <div id="son-top-1"></div> <div id="son-foot-1">小何</div> </div>

然后在需要设置father-1的样式：

#father-1 { width: 100px; height: 30px; font-size: 14px; line-height: 30px; margin-right: 10px; text-align: center; transition: 0.6s; transform: rotateY(0deg) rotateX(0deg); transform-style: preserve-3d; float: left; }

---

二、构建长方形

先写出father-1下六个div的基本参数：

#father-1 div { width: 100px; height: 30px; position: absolute; left: 0; top: 0; transition: 0.6s; color: white; }

由于是要构建长方形，所以需要把左右两个面设为正方形，实现代码：

#father-1 div:nth-of-type(3) { width: 30px; } #father-1 div:nth-of-type(4) { width: 30px; }

构建长方形其实并不难，实际就是将father-1里的前方的面，沿着father-1的z轴前进15个像素，后方的面沿着x轴后退15个像素，顶部的面沿着father-1的X轴旋转90度，再沿着Y轴前进15个像素，底步的面则相反，左边的面则是沿着father-1的Y轴旋转90度，再沿着X轴前进15px即可，右边的面则是沿着father-1的Y轴旋转90度，再沿着X轴后退85px。

具体代码如下：

#son-top-1 { background-color: black; transform: translateY(-15px) rotateX(90deg); } #son-foot-1 { background-color: black; transform: translateY(15px) rotateX(-90deg); border-top: 1px white solid; } #son-left-1 { width: 50px; background-color: black; transform: translateX(-15px) rotateY(90deg); } #son-right-1 { background-color: black; transform: translateX(85px) rotateY(-90deg); } #son-front-1 { background-color: black; transform: translateZ(15px); } #son-rear-1 { background-color: black; transform: translateZ(-15px); }

到这里就基本结束了，就只剩下翻转效果了

 

三、翻转效果

实现这个效果并不是很难，当father-1触发hover效果时，father-1沿着X轴做旋转就行

具体代码如下：

#father-1:hover{ transform: rotateY(0deg) rotateX(90deg); }

这样就完成啦！

总结

以上就是今天小谭要分享的内容，小谭也只是刚刚入门的萌新，代码写的不是很规范，在给div命名时也很随意，如果有什么不足之处也请各位大佬手下留情，多多包涵，小谭也欢迎各位大佬指点一二，小谭不胜荣幸，感谢包容，感谢观看，靴靴!