今天小编跟大家讲解下有关纯CSS实现菜单、导航栏的3D翻转动画效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS实现菜单、导航栏的3D翻转动画效果 的相关资料，希望小伙伴们看了有所帮助。
我曾经向大家展示过闪光的logo 燃烧的火狐狸 多重嵌套动画等例子 今天 我们将要制作一个简单但非常酷的3D翻转菜单。大家可以先看看实际效果 下面有效果截图。
效果图：
HTML代码
HTML内容是一些用作菜单的链接 我们在里面添加了一些额外的SPAN标记来帮助实现3D效果：复制代码代码如下:<ul class="block-menu lazy"> <li><a href="https://www.aidi.net.cn/"class="three-d lazy"> Home <span aria-hidden="true"class="three-d-box lazy"> <span class="front lazy">Home</span> <span class="back lazy">Home</span> </span> </a></li> <li><a href="https://www.aidi.net.cn/demos"class="three-d lazy"> Demos <span aria-hidden="true"class="three-d-box lazy"> <span class="front lazy">Demos</span> <span class="back lazy">Demos</span> </span> </a></li> <!-- more items here --></ul>在A链接标记旁边是一系列的SPAN元素 动画演示过程中 它将用来表现3D立方体的“正面”和“背面”。这些SPAN里的文字和A链接里的文字是一致的。
CSS代码
这个动画的过程就是实现3D变换和元素位置变化。但实际上A链接是没有移动的 动的是SPAN标签 而且是最外层的SPAN标签 内部的SPAN标签被初始化在它的位置上 以后就不做任何变动。每个元素都可以向上翻 并要翻回来 我们使用的是CSS transforms。复制代码代码如下:.block-menu { display: block; background: #000;}</p><p>.block-menu li { display: inline-block;}.block-menu li a { color: #fff; display: block; text-decoration: none; font-family: 'Passion One', Arial, sans-serif; font-smoothing: antialiased; text-transform: uppercase; overflow: visible; line-height: 20px; font-size: 24px; padding: 15px 10px;}.three-d { perspective: 200px; transition: all .07s linear; position: relative; cursor: pointer;} .three-d:hover .three-d-box, .three-d:focus .three-d-box { transform: translateZ(-25px) rotateX(90deg); }.three-d-box { transition: all .3s ease-out; transform: translatez(-25px); transform-style: preserve-3d; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}.front { transform: rotatex(0deg) translatez(25px);}.back { transform: rotatex(-90deg) translatez(25px); color: #ffe7c4;}.front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; padding: 15px 10px; color: white; pointer-events: none; box-sizing: border-box;}如果你想看看正面和反面各自是如何旋转移动的 我强烈推荐你们试一下 将其中的一个设置为display: none 让鼠标悬停在它们上面 你将会看到它们各自将完成整个动画的哪一部分动作。
这种实现方式的唯一的缺点是有重复的菜单名称 虽然技术上是隐藏看不出来的 但从代码质量上说存在代码重复问题。然而 从视觉效果上看 它的动画非常顺滑 毫无瑕疵。没有Javascript Flash或canvas技术 只是一些简单的CSS标记 这技术CSS动画….一种我们web程序员都应该感谢的技术。
来源：爱蒂网
