移动端~3d导航栏制作

最新推荐文章于 2025-12-22 19:02:04 发布

原创最新推荐文章于 2025-12-22 19:02:04 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

实现思路：

1.使用li和span标签搭建结构;

2.使用子绝父相实现盒子层叠效果;

3.开启3d,移动蓝色盒子的z轴;

4.给li标签添加x轴旋转-90deg;

5.给绿色盒子添加旋转90度,往上移动前面子盒子高度一半;

html结构:

css结构:

效果展示:

file:///E:/%E9%BB%91%E9%A9%AC104%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/2023.3.13%E7%A7%BB%E5%8A%A8web%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E7%AB%AFweb%E7%AC%AC%E4%BA%8C%E5%A4%A9/%E5%89%8D%E7%AB%AF91%E6%9C%9F-%E7%A7%BB%E5%8A%A8web%E7%AC%AC%E4%BA%8C%E5%A4%A9/01-%E4%BB%A3%E7%A0%81/08-3d%E5%AF%BC%E8%88%AA%E6%A0%8F.html