ul {
	list-style:none;
	padding:0;
	width:500px;
	height:300px;
	margin:100px auto;
	border:1px solid gray;
	position:relative;
	display:flex;
}
li {
	/* 两张版本 */
			width:25%;
	height:100%;
	position:relative;
	/* 让div在3d空间中 能够看到效果 */
			transform-style:preserve-3d;
	/* 添加过渡属性 */
			transition:all 1s;
}
/*  左右按钮 */
		ul>a {
	font-size:40px;
	color:white;
	background-color:gray;
	position:absolute;
	width:50px;
	height:50px;
	text-align:center;
	line-height:50px;
	text-decoration:none;
	font-weight:900;
}
ul .left {
	left:-50px;
	top:50%;
	transform:translateY(-25px);
}
ul .right {
	right:-50px;
	top:50%;
	transform:translateY(-25px);
}
li>div {
	width:100%;
	height:100%;
	position:absolute;
}
.first {
	background:url(http://www.jq22.com/img/cs/500x300-1.png') no-repeat;
	transform:rotateX(0deg) translateZ(190px);
}
.second {
	background:url('http://www.jq22.com/img/cs/500x300-2.png') no-repeat;
	transform:rotateX(-90deg) translateZ(190px);
}
.third {
	background:url('http://www.jq22.com/img/cs/500x300-3.png') no-repeat;
	transform:rotateX(-180deg) translateZ(190px);
}
.four {
	background:url('http://www.jq22.com/img/cs/500x300-4.png') no-repeat;
	transform:rotateX(-270deg) translateZ(190px);
}
/* 设置 第二个区域的li标签内部 div backgroun的偏移值 */
		li:nth-child(2) {
	transition:all 1s .1s;
}
li:nth-child(3) {
	transition:all 1s .2s;
}
li:nth-child(4) {
	transition:all 1s .3s;
}
li:nth-child(2)>div {
	background-position:-125px 0;
}
li:nth-child(3)>div {
	background-position:-250px 0;
}
li:nth-child(4)>div {
	background-position:-375px 0;
}