CSS3实现翻转导航条特效

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);
}

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS3实现翻转导航条特效

发表回复