一、介绍
本节内容我们来讲解一下，3D导航案例，主要运用到了css3中的3D以及过渡效果，效果如下展示，那么我们开始来学习使用css3来制作一个3D导航效果吧！
二、思路解析
- 制作四个面（前后上下）
1.前后上下，左右部分可以不用添加，因为旋转时看不到（注意后续讲解代码时会添加左右部分）- 将四个面通过定位放到一起
- 开启3d空间，通过位移，旋转放置在相应的位置
- 填写文字
- 制作划入效果，再划入时让整体的盒子对于X轴进行旋转
三、代码分析
1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="all">
<!-- 大盒子，一共六个 -->
<div class="box">
<!-- 前面 -->
<div class="item1">Home</div>
<!-- 后面 -->
<div class="item2">Home</div>
<!-- 上面 -->
<div class="item3">Home</div>
<!-- 下面 -->
<div class="item4">Home</div>
<!-- 左面和右面（可以不做） -->
<div class="item5"></div>
<div class="item6"></div>
</div>
<div class="box">
<div class="item1">Services</div>
<div class="item2">Services</div>
<div class="item3">Services</div>
<div class="item4">Services</div>
<div class="item5"></div>
<div class="item6"></div>
</div>
<div class="box">
<div class="item1">Produts</div>
<div class="item2">Produts</div>
<div class="item3">Produts</div>
<div class="item4">Produts</div>
<div class="item5"></div>
<div class="item6"></div>
</div>
<div class="box">
<div class="item1">Blog</div>
<div class="item2">Blog</div>
<div class="item3">Blog</div>
<div class="item4">Blog</div>
<div class="item5"></div>
<div class="item6"></div>
</div>
<div class="box">
<div class="item1">Contact</div>
<div class="item2">Contact</div>
<div class="item3">Contact</div>
<div class="item4">Contact</div>
<div class="item5"></div>
<div class="item6"></div>
</div>
<div class="box">
<div class="item1">About Us</div>
<div class="item2">About Us</div>
<div class="item3">About Us</div>
<div class="item4">About Us</div>
<div class="item5"></div>
<div class="item6"></div>
</div>
</div>
</body>
</html>2.CSS
.all{
/* 给最外层盒子设置宽高*/
width: 540px;
height: 30px;
/* 让其溢出隐藏*/
overflow: hidden;
/* 设置flex弹性布局，让盒子水平排开*/
display: flex;
justify-content: space-between;
/* 设置水平居中显示*/
margin: 100px auto;
/* 开启3D空间*/
transform-style:preserve-3d ;
}
.box{
/* 设置包着四个面的父盒子宽，高由子元素撑开*/
width: 80px;
/* 设置定位父相子绝，这里是父级相对定位*/
position: relative;
/* 开启3D空间*/
transform-style:preserve-3d ;
/* 设置过度时间*/
transition: all .3s;
}
.item1,.item2,.item3,.item4{
/* 设置四个面的宽高，因为属性相同所以使用并集选择器设置*/
width: 80px;
height: 30px;
/* 设置背景颜色*/
background: rgb(48, 172, 164);
/* 让文字水平居中*/
text-align: center;
/* 设置行高与高相同，让盒子垂直居中*/
line-height: 30px;
/*设置定位，子绝，子级绝对定位 */
position: absolute;
/* 相对于父级的位置*/
top: 0;
left: 0;
}
/*左右两边的盒子，可以不加*/
.item6,.item5{
width: 30px;
height: 30px;
background: rgb(48, 172, 164);
position: absolute;
top: 0;
left: 0;
}
/*让第一个子级对于z轴向前移动15像素*/
.item1{
transform: translateZ(15px);
}
/*让第二个子级对于z轴后前移动15像素*/
.item2{
transform: translateZ(-15px);
}
/*让第三个子级对于Y轴向上移动15像素，并且旋转90度，这样就盖到前后两个盒子上*/
.item3{
transform: translateY(-15px) rotateX(90deg);
}
/*让第四个子级对于Y轴向下移动15像素，并且旋转90度，这样就盖到前后两个盒子下*/
.item4{
transform: translateY(15px) rotateX(-90deg);
/* 设置他的背景色为一个渐变色*/
background: linear-gradient(to bottom,rgb(48, 172, 164),rgb(38, 109, 104));
}
/*设置左右两个盒子，对于X轴进行移动，旋转90度，放置再左右两侧*/
.item5{
transform: translateX(-15px) rotateY(90deg);
}
.item6{
transform: translateX(15px) rotateY(90deg);
}
/*设置盒子划入效果，划入让父级盒子旋转90度*/
.box:hover{
transform: rotateX(90deg);
}运行结果如下
四、结束语
那么本节3D导航案例就结束了，不要忘记点赞加关注哦~