CSS3 3D立方体翻转菜单实现教程
今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上。
当然你也可以直接到这里去查看这款菜单的DEMO演示。
接下来还是分析一下这款CSS3菜单的源代码吧,很简单的HTML+CSS即可实现。
先来看看HTML代码:
<nav> <ul> <li><a class="current" href="#" data-hover="Home">Home</a></li> <li><a href="#" data-hover="Blog">Blog</a></li> <li><a href="#" data-hover="About">About</a></li> <li><a href="#" data-hover="Contact">Contact</a></li> </ul> </nav>
这个HTML布局可谓是干净利落,很难看出来这会是一款超酷的3D菜单。
当然最重要的是CSS代码,一起来看看:
先是定义了一下菜单的整体外观,包括文字的颜色和菜单的背景等等:
nav { background: #fff; margin: 15vh 2rem; } nav ul { list-style: none; } nav ul li { display: inline-block; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.05rem; } nav ul li a { display: inline-block; padding: 1rem; color: #000; text-decoration: none; -webkit-transition: -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s; -webkit-transform-origin: 50% 0px 0px; -ms-transform-origin: 50% 0px 0px; transform-origin: 50% 0px 0px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } nav ul li a.current { color: #FF005B; }
然后就是鼠标滑过菜单项实现的立方体翻转效果了:
nav ul li a:hover { background: #fff; color: #000; -webkit-transform: rotateX(90deg) translateY(-22px); -ms-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px); } nav ul li a::before { position: absolute; top: 100%; left: 0px; width: 100%; padding: 4px 0px; text-align: center; line-height: 50px; background: none repeat scroll 0% 0% #FF005B; color: #FFF; content: attr(data-hover); -webkit-transition: #6363CE 0.3s ease 0s; transition: #6363CE 0.3s ease 0s; -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0px 0px; -ms-transform-origin: 50% 0px 0px; transform-origin: 50% 0px 0px; }
不难看出,我们通过CSS3的transform的rotate属性就能完成翻转的动作,同时结合transition属性来实现翻转过程中颜色的渐变动画。
最后我们把源代码分享上来,下载地址>>
【推荐】FlashTable:表单开发界的极速跑车,让你的开发效率一路狂飙
【推荐】Flutter适配HarmonyOS 5知识地图,实战解析+高频避坑指南
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· JavaScript中如何遍历对象?
· 领域模型应用
· 记一次 ADL 导致的 C++ 代码编译错误
· MySQL查询执行顺序:一张图看懂SQL是如何工作的
· 为什么PostgreSQL不自动缓存执行计划?
· 从被喷“假开源”到登顶 GitHub 热榜,这个开源项目上演王者归来!
· Stack Overflow,轰然倒下!
· Cursor 1.2重磅更新,这个痛点终于被解决了!
· 上周热点回顾(6.30-7.6)
· .NET AI 模板