CSS3实现翻转导航条特效

CSS3 实现翻转导航条特效

效果如下：

HTML 代码：

<ul>
    <li>
        <span class="no1">码云笔记</span>
        <span class="no2">码云笔记</span>
    </li>
    <li>
        <span class="no1">前端博客</span>
        <span class="no2">前端博客</span>
    </li>
    <li>
        <span class="no1">前端开发</span>
        <span class="no2">前端开发</span>
    </li>
    <li>
        <span class="no1">前端教程</span>
        <span class="no2">前端教程</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);
}

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

以上关于CSS3实现翻转导航条特效的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。