* {
	margin:0;
	padding:0;
}
body {
	background:#282828;
}
.box {
	width:500px;
	height:300px;
	position:relative;
	margin:10px auto 0;
}
.box>div {
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:all .3s;
	position:absolute;
	/* css3中可以设置元素背对用户时不显示 */
				backface-visibility:hidden;
}
.box div:nth-child(1) {
	/* 默认情况下这张图需要背对用户 */
				transform:rotateY(180deg);
	background:url(img/bg.png) -305px bottom no-repeat #ff0000;
}
.box div:nth-child(2) {
	background:url(img/bg.png) left bottom no-repeat #ff0000;
}
/* 鼠标移上大盒子的时候我们需要让它下面的二个子div都旋转 */
			.box:hover div:nth-child(1) {
	transform:rotateY(0deg);
}
.box:hover div:nth-child(2) {
	transform:rotateY(-180deg);
}