教你如何用CSS实现3D翻转效果的菜单

随着浏览器技术的进步,CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果,它们能做很多更强大的事情。我曾经向大家展示过闪光的logo燃烧的火狐狸多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单。大家可以先看看实际效果,下面有效果截图和演示链接。

3d-menu

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程序员都应该感谢的技术。

阅读余下内容
 

2条回应:“教你如何用CSS实现3D翻转效果的菜单”

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号