* {

margin:0;

padding:0;

}

.view {

width:560px;

height:300px;

margin:200px auto;

position:relative;

}

.box {

width:100%;

height:100%;

list-style:none;

background-color:black;

position:absolute;

/* 開啟3d效果 */

transform-style:preserve-3d;

}

.box li {

width:25%;

height:100%;

position:relative;

float:left;

/* li元素的子元素span需要3d顯示 */

transform-style:preserve-3d;

transition:all .5s;

}

.box li span {

width:100%;

height:100%;

position:absolute;

}

/* 每一個li標簽的第一個span都有同一個圖片的背景 */

.box li span:nth-of-type(1) {

background:url('http://www.jq22.com/img/cs/500x300-1.png');

transform:translateZ(-150px) rotateX(180deg);

}

/* 每一個li標簽的第2個span都有同一個圖片的背景 */

.box li span:nth-of-type(2) {

background:url('http://www.jq22.com/img/cs/500x300-2.png');

transform:translateY(-150px) rotateX(90deg);

}

/* 每一個li標簽的第3個span都有同一個圖片的背景 */

.box li span:nth-of-type(3) {

background:url('http://www.jq22.com/img/cs/500x300-3.png');

transform:translateY(150px) rotateX(-90deg);

}

/* 每一個li標簽的第4個span都有同一個圖片的背景 */

.box li span:nth-of-type(4) {

background:url('http://www.jq22.com/img/cs/500x300-4.png');

transform:translateZ(150px);

}

/* 通過背景圖像位移,達到4個span構成一個完整圖片背景 */

.box li:nth-of-type(2) span {

background-position-x:-100%;

}

.box li:nth-of-type(3) span {

background-position-x:-200%;

}

.box li:nth-of-type(4) span {

background-position-x:-300%;

}

.view a {

width:60px;

height:60px;

line-height:60px;

text-align:center;

text-decoration:none;

position:absolute;

background-color:black;

font-size:60px;

opacity:.5;

color:#fff;

top:50%;

margin-top:-30px;

display:none;

}

.view .pre {

left:0;

}

.view .next {

right:0;

}