css33d图片轮播_css3实现3D切割轮播图案例

CSS3 3D切割轮播图

margin:0;

padding:0;

}

ul {

margin:0;

padding:0;

list-style: none;

height:100%;

width:100%;

}

.view {

width: 560px;

height: 300px;

border: 1px solid #ccc;

margin: 100px auto;

position: relative;

}/*大盒子*/.view ul {

width: 560px;

height: 300px;/*3d呈现*/

/*transform-style: preserve-3d;*/}

.view ul li {

width: 112px;

height: 300px;float: left;

position: relative;/*3d呈现*/transform-style: preserve-3d;

}

.view ul li span {

position: absolute;

left:0;

top:0;

width:100%;

height:100%;

}

.view ul li span:nth-child(1) {

background-image: url("images/1.jpg");

background-repeat: no-repe