* {
 	margin: 0;
 	padding: 0;
 }
 

 body {
 	background-color: #fff;
 
	color: #555;
 	font-family: 'Avenir Next', 'Lantinghei SC';
 	font-size: 14px;
 	-webkit-font-smoothing: antialiased;
 	
/*字体平滑*/
 }
 


 .wrap {
 	background-color: #ccc;
 	position: absolute;
 	width: 100%;
 	height: 600px;
 	top: 50%;
 	margin-top: -300px;
 	overflow: hidden;
 	perspective: 800px;
 }


 /*海报样式*/
 
 .photo {
 	width: 260px;
 	height: 320px;
 	position: absolute;
 	z-index: 1;
 	box-shadow: 0  0 1px rgba(0, 0, 0, .01);
 	top: 50%;
	left: 50%;
	margin: -160px 0 0 -130px;
 	transition: all .5s; 
 }


.photo .side{
	width: 100%;
	height: 100%;
	background-color: #eee;
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	box-sizing: border-box; /*盒子内的内容不会超过边框*/ 
} 
 

.photo .side_front .image{
	width: 100%;
	height: 250px;
	line-height: 250px;
	overflow: hidden;
}

.photo .side_front .image img{
	width: 100%;
}

.photo .side_front .caption{
	text-align: center;
	font-size: 16px;
	line-height: 50px;
}

.photo .side_back .desc{
	color: #666;
	font-size: 14px;
	line-height: 1.5em;
}

/*当前选中的海报样式*/
.photo_center{
	top: 50%;
	left: 50%;
	margin: -160px 0 0 -130px;
	z-index: 99;

}


/*负责翻转*/
.photo_wrap{
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	transition: all 1s; 	
}


.photo_wrap .side_front{
	transform: rotateY(0);
}


.photo_wrap .side_back{
	transform: rotateY(180deg);
}


.photo .side{
	backface-visibility: hidden;
}


.photo_front .photo_wrap{
	transform: rotateY(0);
}

.photo_back .photo_wrap{
	transform: rotateY(180deg);
}


/*控制按钮样式*/
.nav{
	width: 80%;
	height: 30px;
	line-height: 30px;
	position: absolute;
	left: 10%;
	bottom: 20px;
	z-index: 99;
	text-align: center;
}
/*普通样式*/


.nav .i{
	width: 30px;
	height: 30px;
	display: inline-block;
	cursor: pointer;
	background-color: #aaa;
	border-radius: 50%;
	transform: scale(.5);
	transition: all 1s;
}

.nav .i_current{
	transform: scale(.8);
}

.nav .i_back{
	transform: rotateY(180deg);
	background-color:#555;color:white;
}



/*优化样式*/
.photo_wrap{
	transform-origin: 0% 50%;
}

.photo_front .photo_wrap{
	transform: translate(0px,0px) rotateY(0deg);
}
.photo_back .photo_wrap{
	transform: translate(260px,0px) rotateY(180deg);
}