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抓紧创作!

微信微信 支付宝支付宝

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

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » CSS3实现翻转导航条特效

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们