3D导航翻转效果

前言

使用纯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命名时也很随意，如果有什么不足之处也请各位大佬手下留情，多多包涵，小谭也欢迎各位大佬指点一二，小谭不胜荣幸，感谢包容，感谢观看，靴靴!