使用纯 CSS 创建炫酷的翻转动画效果

Question

CSS3 动画是很有趣的，通过简单少量的代码，就能实现以前我们用 JavaScript 代码编写的效果，而且浏览器对于 CSS 的支持远远优于 JavaScript 的，这使得我们的 CSS 动画将更加的流程。这篇文章就给大家介绍如何使用 CSS 创建炫酷的翻转动画效果。

HTML 结构

所需要的 HTML 代码：

<div class="flip-container">
	<div class="flipper">
		<div class="front">
		<!-- front content -->
		</div>
		<div class="back">
		<!-- back content -->
		</div>
	</div>
</div>

这个翻转动画需要有两个面，就像想扑克牌一样，一个在前面一个在后面。

CSS 样式

对应的 CSS 样式代码：

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.flip-container:hover .back {
	transform: rotateY(0deg);
}
.flip-container:hover .front {
	transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
}

这里简单的解释下上面的 CSS 代码，使用定位将两个 DIV 重叠在一起，定义动画的类型为 3D 动画，动画为翻转 0 度，也就是默认现在的样子，定义动画的执行时间。

CSS 触发动画

当鼠标移动到元素上，我们就执行我们定义好的动画：

/* flip the pane when hovered */
.flip-container:hover .back, .flip-container.hover .back
	transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
	transform: rotateY(180deg);
}

CSS 翻转动画是我们最简单和基本的动画类型，通过鼠标的操作，我们可以在同一个地方展示更多的内容，而且还有个很好看的动画效果，这对于网页的用户体验是极好的。

点击这里参看示例：http://run.wenjiangs.com/code/#/?code=7gGw1C37