随着浏览器技术的进步，CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果，它们能做很多更强大的事情。我曾经向大家展示过闪光的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程序员都应该感谢的技术。