3D导航栏案例

1.html结构

<ul>
    <li>
        <div class="box">
            <div class="front">首页</div>
            <div class="bottom">详情</div>
        </div>
    </li>
</ul>

li为导航栏

box是旋转的盒子

front是前面的盒子

bottom是下面的盒子

2.CSS结构

     1.bottom向下移动li的高度的一般17.5px，在沿着X轴旋转9deg，在这里是反方向旋转，所以为负。

     2.front需要沿着Z轴向前移动高度一般17.5px，

     3.鼠标放在box盒子上让其沿着X轴旋转90deg。

li{
    list-style: none;
    float: left;
    perspective: 500px;
    cursor: pointer;
}
.box{
    position: relative;
    width: 120px;
    height: 35px;
    margin: 10px;
    transform-style: preserve-3d;
    /*添加过渡 过渡加在本身上*/
    transition: all .3s;
}
/*鼠标经过时沿X轴旋转90deg*/
.box:hover{
    transform: rotate(90deg);
}
.front,
.bottom{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 35px;
    text-align: center;
}
.front{
    background-color: pink;
    z-index:1;
    transform: translateZ(17.5px);
}
.bottom{
    background-color: skyblue;
    transform: translateY(17.5px) rotateX(-90deg);
}