* {
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;
}
 线性表之顺序存储结构)
