* {
	padding:0;
	margin:0;
}
.view {
	width:560px;
	height:300px;
	margin:100px auto;
	position:relative;
}
ul {
	width:100%;
	height:100%;
	list-style:none;
	transform:rotate3d(1,1,0,0deg);
	transform-style:preserve-3d;
}
ul > li {
	width:20%;
	height:100%;
	float:left;
	position:relative;
	transform-style:preserve-3d;
	/*添加过渡效果*/
            transition:transform 0.5s;
}
ul > li > span {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
ul > li > span:nth-of-type(1) {
	background:url("https://www.jq22.com/img/cs/500x300-1.png");
	background-size:cover;
	/*往z轴正方向偏移*/
            transform:translateZ(150px);
}
ul > li > span:nth-of-type(2) {
	background:url("https://www.jq22.com/img/cs/500x300-2.png");
	background-size:cover;
	/*往z轴正方向偏移*/
            transform:translateY(-150px) rotateX(90deg);
}
ul > li > span:nth-of-type(3) {
	background:url("https://www.jq22.com/img/cs/500x300-3.png");
	background-size:cover;
	/*往z轴正方向偏移*/
            transform:translateZ(-150px) rotateX(180deg);
}
ul > li > span:nth-of-type(4) {
	background:url("https://www.jq22.com/img/cs/500x300-4.png");
	background-size:cover;
	/*往z轴正方向偏移*/
            transform:translateY(150px) rotateX(-90deg);
}
/*设置每一个li元素的span所显示的图片的位置*/
        ul > li:nth-of-type(2) > span {
	background-position:-100% 0;
}
ul > li:nth-of-type(3) > span {
	background-position:-200% 0;
}
ul > li:nth-of-type(4) > span {
	background-position:-300% 0;
}
ul > li:nth-of-type(5) > span {
	background-position:-400% 0;
}
.pre,.next {
	width:60px;
	height:60px;
	text-align:center;
	line-height:60px;
	position:absolute;
	top:50%;
	text-decoration:none;
	font-size:40px;
	transform:translate(0,-50%);
	background-color:rgba(0,0,0,0.5);
	color:#fff;
}
.pre {
	left:0;
}
.next {
	right:0;
}