CSS3实现翻转导航条特效

CSS3 实现翻转导航条特效

效果如下：

HTML 代码：

<ul>
    <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>

CSS 代码：

* {
    /*清除默认样式*/
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

ul {
    /*设置大盒子的大小，背景颜色，居中*/
    width: 600px;
    background: #F90;
    color: #fff;
    margin: 50px auto;
}

li {
    /*设置小盒子的大小，向左浮动，保存嵌套元素的 3D 空间 ，3D 距离*/
    width: 150px;
    height: 40px;
    transition: all 0.4s ease 0s;
    float: left;
    position: relative;
    transform-style: preserve-3d;
    perspective: 6000px
}

li:hover {
    /*使他沿 X 轴逆旋转 90 度*/
    transform: rotateX(-90deg);
}

span {
    /*设置盒子大小，行高，字体居中，绝对定位*/
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

li .no1 {
    background: #F60;
    transform: translateZ(20px);
}

li .no2 {
    background: #39F;
    transform: rotateX(90deg) translateZ(20px);
}

更多前端特效代码，请关注技术博客，每日为你整理分享最好的前端知识。