* { 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; }
自己修改图片路径就可以获得想要的轮播图效果