/*翻牌样式*/
.flip-container {
	perspective:1000;
	-webkit-perspective:1000px;
	/*父类容器中 perspective 子类允许透视*/
	-moz-perspective:1000px;
	-ms-perspective:1000px;
	-o-perspective:1000px;
	perspective:1000px;
	margin:0px auto;
	float:left;
}
.flip-container:hover .back {
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
	z-index:2;
}
.flip-container:hover .front {
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
	-o-transform:rotateY(180deg);
	z-index:1
}
.flip-container,.front,.back {
	width:500px;
	height:300px;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto 0;
}
.flipper {
	transition:transform 0.6s ease-out;
	transition:transform .5s ease-in-out;
	-webkit-transition:transform .5s ease-in-out;
	-moz-transition:transform .5s ease-in-out;
	-ms-transition:transform .5s ease-in-out;
	-o-transition:transform .5s ease-in-out;
	-webkit-transform-style:preserve-3d;
	/*使其子类变换后得以保留 3d转换后的位置*/
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
	display:block;
	position:relative;
}
.front,.back {
	backface-visibility:hidden;
	transition:0.6s ease-out;
	-webkit-transition:.6s ease-out;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
	position:absolute;
	top:0;
	left:0;
}
.front img,.back img {
	width:500px;
	height:300px;
	overflow:hidden;
}
.front {
	z-index:2;
	transform:rotateY(0deg);
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
}
.back {
	z-index:1;
	transform:rotateY(-180deg);
	transform:rotateY(-180deg);
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	-ms-transform:rotateY(-180deg);
	-o-transform:rotateY(-180deg);
}