纯CSS实现菜单、导航栏的3D翻转动画效果
我曾经向大家展示过闪光的logo，燃烧的火狐狸，多重嵌套动画等例子，今天，我们将要制作一个简单但非常酷的3D翻转菜单。大家可以先看看实际效果，下面有效果截图。
效果图：
HTML代码
HTML内容是一些用作菜单的链接，我们在里面添加了一些额外的SPAN标记来帮助实现3D效果：
复制代码代码如下:
Home
Home
Home
Demos
Demos
Demos
在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程序员都应该感谢的技术。相关阅读:
在USB磁盘上制作Linux的GRUB引导的方法
32位Win7可以升级到Win10 64位吗？Win7 32位系统安装Win10 64位的方法
HTML5 CSS3打造相册效果附源码下载
jQuery获取(选中)单选,复选框,下拉框中的值
C#利用GDI绘制常见图形和文字
Android中自定义ScrollView代码实例
Android判断用户的网络类型实例讲解(2/3/4G、wifi)
深入理解PHP之OpCode原理详解
理解Javascript的call、apply
7个jQuery最佳实践
几个小例子教你如何实现正则表达式highlight高亮
将Sublime Text 2固定到Ubuntu启动器的方法
Node.js和MongoDB实现简单日志分析系统
C#中GraphicsPath的Flatten方法用法实例
php 3d animation CSS_纯CSS实现菜单 导航栏的3D翻转动画效果 我曾经向大家展示过闪光的logo - phpStudy...
