html,body,div { margin:0; padding:0; } body { background-color:#232323 } .slider-outer { width:560px; height:300px; margin:50px auto; background-color:#f60; position:relative; } .img-item { position:absolute; width:112px; height:100%; background-color:#f10; transition:all 1.5s; /*设置子元素在3D空间中呈现*/transform-style:preserve-3d; } /*让图片可以构成一个有四个面的长方体 start*/ .img { width:100%; height:100%; position:absolute; background-size:cover; } .img:nth-child(1) { background:red no-repeat; transform:rotateX(0deg) translateZ(150px); } .img:nth-child(2) { background:blue no-repeat; transform:rotateX(-90deg) translateZ(150px); } .img:nth-child(3) { background:yellow no-repeat; transform:rotateX(-180deg) translateZ(150px); } .img:nth-child(4) { background:pink no-repeat; transform:rotateX(-270deg) translateZ(150px); } /*让图片可以构成一个有四个面的长方体 end*/ .btns { position:absolute; top:50%; width:100%; height:70px; margin-top:-35px; } .prev,.next { width:70px; height:70px; line-height:70px; text-align:center; background-color:rgba(0,0,0,.3); color:#fff; font-size:30px; cursor:pointer; position:absolute; } .prev { left:0; } .next { right:0; }