js css实现3d切割轮播图的方法-mile米乐体育

这篇“js css实现3d切割轮播图的方法”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“js css实现3d切割轮播图的方法”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

css是什么意思

css是一种用来表现html或xml等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于html网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

具体内容如下

第一步：我们首先要通过css来完成一个基本布局，利用 transform-style: preserve-3d设置成3d。

下面是css部分的代码

*{ margin:0; padding:0; box-sizing:border-box; } li{ list-style:none; } /*轮播图*/ .homepage{ width:800px; height:200px; margin:150pxauto; background-color:pink; position:relative; /*overflow:hidden;*/ }  .homepage>ul{ width:100%; height:100%; }  .homepage>ul>li{ width:200px; height:100%; float:left; transform-style:preserve-3d; position:relative; transition:all1s; }  .homepage>ul>li>span{ position:absolute; top:0; left:0; width:100%; height:100%; }  .homepage>ul>li>span:nth-child(1){ background-image:; transform:translatez(100px); } .homepage>ul>li>span:nth-child(2){ background-image:; transform:rotatex(90deg)translatez(100px); } .homepage>ul>li>span:nth-child(3){ background-image:; transform:rotatex(180deg)translatez(100px); } .homepage>ul>li>span:nth-child(4){ background-image:; transform:rotatex(270deg)translatez(100px); }  /*图片的定位*/ .homepage>ul>li:nth-child(2)span{ background-position:-200px0; } .homepage>ul>li:nth-child(3)span{ background-position:-400px0; } .homepage>ul>li:nth-child(4)span{ background-position:-600px0; }  /*小按钮*/ a{ position:absolute; width:30px; height:70px; background-color:rgba(0,0,0,.2); text-decoration:none; color:#fff; top:50%; margin-top:-35px; line-height:70px; text-align:center; display:none; } .right{ right:0; }

第二步：我们利用js来调整图片运动时的切割速度以及方向。

下面是js的代码。

$(function(){ varindex=0; varflag=true; vartime=setinterval(move,700);  //下一张 functionmove(){ if(!flag)return; flag=false; index  ; $(".homepage>ul>li").css("transform","rotatex(" (-90*index) "deg)").each(function(index,item){ $(item).css("transition-delay",index*0.2 "s"); }); }  //移入移出 $(".homepage").mouseenter(function(){ clearinterval(time); $(".homepage>a").css("display","block"); }) $(".homepage").mouseleave(function(){ time=setinterval(move,700); $(".homepage>a").css("display","none"); })  //点击左边按钮：上一张 $(".left").on("click",function(){ if(!flag)return; flag=false; index--; $(".homepage>ul>li").css("transform","rotatex(" (-90*index) "deg)").each(function(index,item){ $(item).css("transition-delay",index*0.2 "s"); }); })  //点击有面按钮：下一张 $(".right").click(move);  //动画整个过渡结束之后，transitionend过渡完成时触发 $("li:last").on("transitionend",function(){ flag=true; }) })

最后：body区域代码如下

 
 
     
 
     
 
     
 
     
 
 < >