body{
	text-align: center;
	background: #a46740;
}
#game{
	border-radius: 10px;
	border: 1px solid #666;
	background: #232;
	width: 500px;
	height: 460px;
	margin: 0 auto;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	//垂直对齐

}
#cards{
	position: relative;
	width: 380px;
	height: 400px;
}
.card{
	-webkit-perspective: 600;
	width: 80px;
	height: 120px;
	position: absolute;
	-webkit-transition: all .7s;
}
.face{
	border-radius: 10px;
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transition-property: opacity, transform, box-shadow;
	-webkit-transition-duration: 1s;
	/*transition不包含子div*/
	-webkit-backface-visibility: hidden;
}
.front{
	background: #999 url(../img/cards.png) -240px -120px;
	z-index: 10;
}
.back{
	background: #efefef url(../img/cards.png);
	-webkit-transform: rotate3d(0,1,0,-180deg);
	z-index: 8;
}
.card:hover .face, .card-flipped .face{
	box-shadow: 0 0 10px #aaa;
}
.card-flipped .front{
	-webkit-transform: rotate3D(0,1,0,180deg);
	z-index: 8;
}
.card-flipped .back{
	-webkit-transform: rotate3D(0,1,0,0deg);
	z-index: 10;
}
.card-removed{
	opacity: 0;
}
.card1{
	background-position: 0 0;
}
.card2{
	background-position: -80px 0;
}
.card3{
	background-position: -160px 0;
}
.card4{
	background-position: 0 -120px;
}
.card5{
	background-position: -80px -120px;
}
.card6{
	background-position: -160px -120px;
}