3d 导航栏
发布于: 2021 年 04 月 07 日
我们做这种 3d 导航案例需要有一定的立体知识，利用几何图形的翻转旋转来组成，用透视来实现 3d 效果，废话不多说哈哈，我们直接上代码。
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3d导航案例</title> <style> * { margin: 0; padding: 0; } ul { margin: 100px; } ul li { float: left; margin: 0 5px; list-style: none; width: 120px; height: 35px; perspective: 500px; } .box { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all .4s } .box:hover { transform: rotatex(90deg); } .front, .bottom { width: 100%; height: 100%; position: absolute; top: 0; left: 0; font-size: 20px; text-align: center; line-height: 35px; } .front { background-color: pink; transform: translateZ(17.5px); } .bottom { transform: translateY(17.5px) rotateX(-90deg); background-color: purple; } </style></head>
<body> <ul> <li> <div class="box"> <div class="front">博主是帅哥</div> <div class="bottom">博主小萌新</div> </div> </li> <li> <div class="box"> <div class="front">博主是帅哥</div> <div class="bottom">博主小萌新</div> </div> </li> <li> <div class="box"> <div class="front">博主是帅哥</div> <div class="bottom">博主小萌新</div> </div> </li> <li> <div class="box"> <div class="front">博主是帅哥</div> <div class="bottom">博主小萌新</div> </div> </li> <li> <div class="box"> <div class="front">博主是帅哥</div> <div class="bottom">博主小萌新</div> </div> </li> </ul></body>
</html>复制代码
这个未用到外部链接，代码可以直接运行。
效果图如下
这是一个立体的 3d 旋转小案例，读者可以根据自己思路进行创新。
划线
评论
复制
发布于: 2021 年 04 月 07 日阅读数: 12
版权声明: 本文为 InfoQ 作者【赫鲁小夫】的原创文章。
原文链接:【http://xie.infoq.cn/article/8e4d753a17cef81ab45e40204】。文章转载请联系作者。
赫鲁小夫
关注
还未添加个人签名 2021.02.23 加入
还未添加个人简介
评论