有这样一种效果，导航栏上面的导航内容可以实现立体翻转的效果，这是怎样实现的呢？这是基于css动画属性实现的。
前提：忘了这个属性的具体内容的点击下方链接可以查看
css的transform属性：https://www.runoob.com/cssref/css3-pr-transform.html
实现效果：
image.png
当鼠标滑过时：
image.png
主要用到的知识点：
1.transform-style:指定元素在怎样的空间呈现
有两个值 ：
1.1 flat:在2维平面呈现
1.2 preserve-3d:在3维空间呈现
2.transform-origin:设置元素的运动基点，也就是参照点，默认是元素中心
整体构思：
每个li中放两个span , 最先展示前面的span ,当鼠标滑过的时候，前面的span沿着x轴向下翻转90度，后面的span沿着x轴向上翻转90度。
代码实现：
/*css*/
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
width: 800px;
height: 40px;
margin: 100px auto;
background: rgb(207, 216, 216);
}
.nav_left{
content: "";
display: block;
clear: both;
}
li{
height: 40px;
float: left;
transition: .5s;
/*设置元素运动的基点，以顶部为参照点*/
transform-origin: top;
/*规定元素在2维呈现还是3维呈现*/
transform-style: preserve-3d;
margin-right: 10px;
}
.nav_front,.nav_back{
display: block;
width: 70px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav_front{
background: blue;
color: #fff;
}
.nav_back{
background: purple;
color: aqua;
/*3d旋转 绕着X轴旋转，旋转90度，向上翻*/
transform:rotate3d(1,0,0,-90deg);
transform-origin: top;
}
li:hover{
/*3d旋转 绕着X轴旋转，旋转90度，向下翻*/
transform:rotate3d(1,0,0,90deg)
}
</style>
页面
<div class="nav">
<ul class="nav_left">
<li>
<span class="nav_front">首页</span>
<span class="nav_back">Home</span>
</li>
<li>
<span class="nav_front">播放</span>
<span class="nav_back">Play</span>
</li>
<li>
<span class="nav_front">我们</span>
<span class="nav_back">About</span>
</li>
</ul>
</div>
最后：我目前没找到在简书中怎么加入视频的，现在看不了动态效果，如果哪位田螺姑娘/小哥知道怎么加入动图，可以留言教我一下，谢谢啦！
