body {
	background:#eee;
}
.box {
	width:600px;
	height:400px;
	position:relative;
	margin:30px auto;
}
#prev,#next {
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	background:#efefef;
	border-radius:25px;
	position:absolute;
	top:50%;
	margin-top:-25px;
	box-shadow:2px 2px 10px #666;
	font-size:25px;
	text-decoration:none;
	color:#fff;
	color:#9B9B9B;
	transition:all 0.5s;
}
#prev:hover,#next:hover {
	background:rgba(0,0,0,0.3);
	color:#FFF;
}
#prev {
	left:-80px;
}
#next {
	right:-80px;
}
#imgs {
	width:600px;
	height:400px;
	position:relative;
	-webkit-transform-style:preserve-3d;
	-webkit-perspective:1000px;
}
#imgs img {
	width:600px;
	height:400px;
	position:absolute;
	left:0;
	top:0;
	-webkit-transform-origin:bottom;
	-webkit-transform:rotateX(-180deg);
	opacity:0;
}
#imgs .show {
	-webkit-animation:see 1s linear forwards;
}
#imgs .hide {
	-webkit-animation:no 1s linear forwards;
}
@-webkit-keyframes see {
	0% {
	-webkit-transform:rotateX(180deg);
	opacity:0;
}
60% {
	-webkit-transform:rotateX(20deg);
}
70% {
	-webkit-transform:rotateX(15deg);
}
80% {
	-webkit-transform:rotateX(-15deg);
}
85% {
	-webkit-transform:rotateX(10deg);
}
90% {
	-webkit-transform:rotateX(-10deg);
}
100% {
	-webkit-transform:rotateX(0);
	opacity:1;
}
}@-webkit-keyframes no {
	0% {
	-webkit-transform:rotateX(0);
	opacity:1;
}
60% {
	-webkit-transform:rotateX(-160deg);
}
70% {
	-webkit-transform:rotateX(-165deg);
}
80% {
	-webkit-transform:rotateX(-195deg);
}
85% {
	-webkit-transform:rotateX(-170deg);
}
90% {
	-webkit-transform:rotateX(-190deg);
}
100% {
	-webkit-transform:rotateX(-180deg);
	opacity:0;
}
}