.book {
	width:460px;
	height:300px;
	position:relative;
	margin:10px 300px;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
	transform:rotatex(30deg);
}
.page {
	width:230px;
	height:300px;
	border:1px solid #666;
	position:absolute;
	transform-origin:left;
	transform-style:preserve-3d;
	backface-visibility:hidden;
	font-size:60px;
	text-align:center;
}
.page span {
	display:block;
	height:100%;
	width:100%;
	position:absolute;
	/*background-image:url(../img/img_1001.jpg);
	background-size:100% 100%;
	*/
}
.page span:nth-child(2) {
	transform:rotatey(-180deg);
	backface-visibility:hidden;
}
.bookImage {
	width:230px;
	height:300px;
}
.serialNum {
	width:40px;
	height:40px;
	font-size:36px;
	border:1px solid #6d9c36;
	color:#7b7115;
	opacity:0.8;
	position:absolute;
	top:5px;
	right:5px;
	background-color:#fff0f0;
}
#but {
	width:300px;
	height:50px;
	margin:10px;
}
#after {
	width:60px;
	height:30px;
	float:right;
	margin-right:10px;
}
#before {
	width:60px;
	height:30px;
	float:left;
	margin-left:10px;
}
/*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画，  
            使用时需要在JS中点击上一页时添加改属性值*/


/*翻书下一页的动画*/

@keyframes page {
	0% {
	transform:rotateY()(0deg);
}
100% {
	transform:rotateY(-180deg);
	z-index:10;
}
}/*翻书上一页的动画*/

@keyframes page1 {
	0% {
	transform:rotateY(-180deg);
	z-index:10;
}
100% {
	transform:rotateY(0deg);
}
}