JS+CSS实现3D切割轮播图的方法

这篇“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:url(../images/bxqy.jpg);
transform:translateZ(100px);
}
.homePage>ul>li>span:nth-child(2){
background-image:url(../images/fczlm.jpg);
transform:rotateX(90deg)translateZ(100px);
}
.homePage>ul>li>span:nth-child(3){
background-image:url(../images/hfh.jpg);
transform:rotateX(180deg)translateZ(100px);
}
.homePage>ul>li>span:nth-child(4){
background-image:url(../images/ss.jpg);
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区域代码如下

<divclass="homePage">
<ul>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<aclass="left"href="javascript:;"><</a>
<aclass="right"href="javascript:;">></a>
</div>

<scriptsrc="js/jquery-1.8.3.min.js"></script>
<scriptsrc="js/demo.js"></script>

注意：要利用 overflow: hidden;来隐藏切割时超出的部分。最后3D切割轮播图就完成了。

以上是“JS+CSS实现3D切割轮播图的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！