写点什么

3d 导航栏

用户头像
赫鲁小夫
关注
发布于: 2021 年 04 月 07 日
3d导航栏

我们做这种 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
用户头像

赫鲁小夫

关注

还未添加个人签名 2021.02.23 加入

还未添加个人简介

评论

发布
暂无评论
3d导航栏