* {
	padding:0;
	margin:0;
	list-style:none;
}
.view {
	width:560px;
	height:300px;
	margin:100px auto;
	position:relative;
}
ul {
	width:100%;
	height:100%;
	transform-style:preserve-3d;
	transform:rotate3d(1,1,0,0deg);
}
ul>li {
	width:20%;
	height:100%;
	float:left;
	transform-style:preserve-3d;
	position:relative;
	/* 过度效果 */
          transition:transform 0.6s;
}
ul>li>span {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
ul>li>span:nth-of-type(1) {
	background:url("http://www.jq22.com/img/cs/500x300-1.png");
	/* 往z轴正方向偏移 */
          transform:translateZ(150px);
}
ul>li>span:nth-of-type(2) {
	background:url("http://www.jq22.com/img/cs/500x300-2.png");
	transform:translateY(-150px) rotateX(90deg);
}
ul>li>span:nth-of-type(3) {
	background:url("http://www.jq22.com/img/cs/500x300-3.png");
	transform:translateZ(-150px) rotateX(-180deg);
}
ul>li>span:nth-of-type(4) {
	background:url("http://www.jq22.com/img/cs/500x300-4.png");
	transform:translateY(150px) rotateX(-90deg);
}
ul>li:nth-of-type(2)>span {
	background-position-x:-100%;
}
ul>li:nth-of-type(3)>span {
	background-position-x:-200%;
}
ul>li:nth-of-type(4)>span {
	background-position-x:-300%;
}
ul>li:nth-of-type(5)>span {
	background-position-x:-400%;
}
.pre,.next {
	width:40px;
	height:60px;
	font-size:40px;
	position:absolute;
	top:50%;
	text-decoration:none;
	text-align:center;
	line-height:60px;
	color:#ccc;
	background-color:rgba(0,0,0,0.4);
	transform:translate(0,-50%);
}
.pre {
	left:0;
}
.next {
	right:0;
}