html,body,div{margin:0;padding:0;}
body{background-color:#232323}
.slider-outer{width:560px;height:300px;margin:150px 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:url(../images/1.png) no-repeat;transform:rotateX(0deg) translateZ(150px);}
.img:nth-child(2){background:url(../images/2.png) no-repeat;transform:rotateX(-90deg) translateZ(150px);}
.img:nth-child(3){background:url(../images/3.png) no-repeat;transform:rotateX(-180deg) translateZ(150px);}
.img:nth-child(4){background:url(../images/4.png) 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;}