随着浏览器技术的进步, CSS 动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果, 它们能做很多更强大的事情. 我曾经向大家展示过闪光的 logo, 燃烧的火狐狸, 多重嵌套动画等例子, 今天, 我们将要制作一个简单但非常酷的 3D 翻转菜单. 大家可以先看看实际效果, 下面有效果截图和演示链接.
观看演示
html 代码
HTML 内容是一些用作菜单的链接, 我们在里面添加了一些额外的 SPAN 标记来帮助实现 3D 效果:
- <ul class="block-menu">
- <li><a href="/" class="three-d">
- Home
- <span aria-hidden="true" class="three-d-box">
- <span class="front">Home</span>
- <span class="back">Home</span>
- </span>
- </a></li>
- <li><a href="/demos" class="three-d">
- Demos
- <span aria-hidden="true" class="three-d-box">
- <span class="front">Demos</span>
- <span class="back">Demos</span>
- </span>
- </a></li>
- <!-- more items here -->
- </ul>
在 A 链接标记旁边是一系列的 SPAN 元素, 动画演示过程中, 它将用来表现 3D 立方体的 "正面" 和 "背面". 这些 SPAN 里的文字和 A 链接里的文字是一致的.
CSS 代码
这个动画的过程就是实现 3D 变换和元素位置变化. 但实际上 A 链接是没有移动的, 动的是 SPAN 标签, 而且是最外层的 SPAN 标签, 内部的 SPAN 标签被初始化在它的位置上, 以后就不做任何变动. 每个元素都可以向上翻, 并要翻回来, 我们使用的是 CSS transforms.
- /* basic menu styles */
- .block-menu {
- display: block;
- background: #000;
- }
- .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;
- }
- /* animation domination */
- .three-d {
- perspective: 200px;
- transition: all .07s linear;
- position: relative;
- cursor: pointer;
- }
- /* complete the animation! */
- .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%;
- }
- /*
- put the "front" and "back" elements into place with CSS transforms,
- specifically translation and translatez
- */
- .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 程序员都应该感谢的技术.
来源: http://www.webhek.com/post/3d-menu.html