3D转换导航栏
2019-08-26 本文已影响0人
我是何宝荣呀
思路
可以使用两只手模拟两个盒子去理解
1、 两个span的形状如图
正面图
2、 使其进行3D变形，其中有一个绕x轴进行90°旋转 rotateX(90deg)
两个盒子的侧面图
3、 后又使其向上移动一半的距离translateZ(20px)，因为rotateX(90deg)的旋转中心是沿着center的；
移动后的侧面图
4、 然后让竖着的那个span向前也就是z轴移动一半的距离就可以构成3D导航的原型
侧面图
5、 以上就是3D导航的原理，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微软雅黑';
background-color: #F7F7F7;
}
.nav {
height: 40px;
margin-top: 50px;
text-align: center;
list-style: none;
}
li {
width: 120px;
height: 40px;
line-height: 40px;
float: left;
position: relative;
transition: all 1s;
transform-style: preserve-3d;
}
li span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
li span:last-child {
background-color: salmon;
transform: rotateX(90deg) translateZ(20px);
}
li span:first-child {
background-color: slateblue;
transform: translateZ(20px);
}
.nav li:hover {
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<ul class="nav">
<li>
<span>天气</span>
<span>太热了</span>
</li>
<li>
<span>天气</span>
<span>太热了</span>
</li>
<li>
<span>天气</span>
<span>太热了</span>
</li>
<li>
<span>天气</span>
<span>太热了</span>
</li>
</ul>
</body>
</html>
