CSS3如何制作轮播图切割效果

这篇文章主要介绍CSS3如何制作轮播图切割效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！炫酷CSS3切割效果轮播图炫酷CSS3切割效果轮播图” /> 炫酷,CSS3,切割效果,轮播图” /> 代码” /> 代码” />

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; } $(function (){ var num = 0; $(“#j_silder_outer .img-item”).each(function(index, el) { $(this).css({ “left”:$(this).width() * index + “px”, /*让每个img-item延时一定时间执行动画*/ “transitionDelay”: index * 0.3 + “s” }); $(this).find(“.img”).css({ “backgroundPosition”: -$(this).width() * index + “px” });; }); $(“.prev”).on(“click”,function (){ $(“#j_silder_outer .img-item”).css(“transform”, “rotateX(” + (++num * 90) + “deg)”); }); $(“.next”).on(“click”,function (){ $(“#j_silder_outer .img-item”).css(“transform”, “rotateX(” + (–num * 90) + “deg)”); }); var timejg=4000;//轮播间隔时间 var time = setInterval(move,timejg); function move(){ $(“#j_silder_outer .img-item”).css(“transform”, “rotateX(” + (–num * 90) + “deg)”); } $(‘.slider-outer’).hover(function(){ clearInterval(time); },function(){ time = setInterval(move,timejg); }); })