3d导航

最新推荐文章于 2024-09-25 16:03:28 发布

weixin_42855041

最新推荐文章于 2024-09-25 16:03:28 发布

阅读量156

点赞数

文章标签： css3 3d html 导航

本文链接：https://blog.csdn.net/weixin_42855041/article/details/81457484

版权

3d导航

这是一个纯css3的3d导航，简单粗暴，通俗易懂

HTML：
<ul class="box">
    <li><span>大劫案</span><span>是假的</span></li>
     <li><span>大劫案</span><span>是假的</span></li>
     <li><span>大劫案</span><span>是假的</span></li>
 </ul>

css:
.box{width: 700px;height: 50px;border:1px solid #ccc;margin:100px auto;overflow:hidden;}
.box li{width: 100px;height: 50px;line-height: 50px;text-align:center;float: left;transition:all 1s;transform-style:preserve-3d;position:relative;}
.box span{display:block;width: 100px;line-height: 50px;text-align:center;position:absolute;left:0;top:0;}
.box span:nth-child(1){transform:translateZ(25px);background:pink;}
.box span:nth-child(2){transform:rotateX(90deg)translateZ(25px);background:blue;}
.box li:hover{transform:rotateX(-90deg);}