* {
	margin:0;
	padding:0;
	list-style:none;
}
#box {
	width:700px;
	height:400px;
	margin:100px auto;
	background:url("http://www.jq22.com/img/cs/500x300-1.png") no-repeat;
	position:relative;
	perspective:1200px;
}
#box .page {
	position:absolute;
	width:50%;
	height:100%;
	right:0;
	top:0;
	transform-style:preserve-3d;
	z-index:2;
	transform-origin:left center;
	transition:1s all ease;
}
#box .page span {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
#box .page span.front {
	background:url("http://www.jq22.com/img/cs/500x300-1.png") no-repeat right top;
	transform:translateZ(0.1px);
}
#box .page span.back {
	background:url("http://www.jq22.com/img/cs/500x300-2.png") no-repeat left top;
	transform:translateZ(-0.1px) scale(-1,1);
}
#box .page2 {
	position:absolute;
	width:50%;
	height:100%;
	right:0;
	top:0;
	background:url("http://www.jq22.com/img/cs/500x300-2.png") no-repeat right top;
	z-index:1;
}