CSS3实现图片翻转效果

• 直接上代码看效果
  html:

<div class="father">
		<div class="before">正面</div>
		<div class="after">反面</div>
</div>

css样式：

.father{
	width: 300px;
	height: 200px;
	position: relative;
	transition: all 1s linear;
	transform-style: preserve-3d;
	}
.before,.after{
	width: 300px;
	height: 200px;
	position: absolute;
	top: 0;
	left: 0;
}
.before{
	background: red;
}
.after{
	background: lightblue;
	transform: rotateX(-180deg);
}
.father:hover{
	transform: rotateX(180deg);
}

	ps:1. 若缺少transform-style:preserve-3d；图片翻转效果就无法实现，实现翻转的关键
	2. transform-style属性需要配合transform属性使用，默认值是flat（子元素保留其3D位置。在2D平面呈现）；preserve-3d（子元素保留其3D位置）。