3D之切割轮播图
2019-06-30 本文已影响0人
小透明进击战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.view {
width: 560px;
height: 300px;
margin: 100px;
position: relative;
}
.view > ul {
width: 100%;
height: 100%;
list-style: none;
/*background-color: #cccccc;*/
/*transform: rotate3d(1,1,0,-30deg);*/
transform-style: preserve-3d;
}
.view > ul > li {
width: 20%;
height: 100%;
float: left;
position: relative;
transform-style: preserve-3d;
/*添加过渡*/
transition: transform 1s;
}
.view > ul > li > span {
width: 100%;
height: 100%;
/*因为span要形成立方体，所以要脱离标准流*/
position: absolute;
left: 0;
top: 0;
}
.view > ul > li > span:nth-of-type(1) {
background-image: url("./images/q1.jpg");
transform: translateZ(150px);
}
.view > ul >li > span:nth-of-type(2) {
background-image: url("./images/q2.jpg");
transform: translateY(-150px) rotateX(90deg);
}
.view > ul > li > span:nth-of-type(3) {
background-image: url("./images/q3.jpg");
transform: translateZ(-150px) rotateX(180deg);
}
.view > ul > li > span:nth-of-type(4) {
background-image: url("./images/q4.jpg");
transform: translateY(150px) rotateX(-90deg);
}
.view > ul > li:nth-of-type(2) > span {
background-position: -100% 0;
}
.view > ul > li:nth-of-type(3) > span {
background-position: -200% 0;
}
.view > ul > li:nth-of-type(4) > span {
background-position: -300% 0;
}
.view > ul > li:nth-of-type(5) > span {
background-position: -400% 0;
}
.left,.right {
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
text-decoration: none;
font-size: 60px;
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="view">
<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>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<a href="#" class="left"><</a>
<a href="#" class="right">></a>
</div>
<script src="../jq/jquery.min.js"></script>
<script>
$(function(){
//定义一个图片的索引
var index=0;
//添加节流阀
var flag=true;
//下一张
$(".right").on("click",function(){
if(flag==true){
flag=false;
index--;
//将所有的li元素围绕X轴旋转
$("li").each(function(key,value){
//通过transform旋转
$(this).css({
"transform":"rotateX("+(index*90)+"deg)",
"transition-delay":(key*0.2)+"s"
});
});
//将flag在这次结束后变成true
setTimeout(function(){
flag=true;
},1000);
}
});
//上一张
$(".left").on("click",function(){
if(flag==true){
flag=false;
index++;
//将所有的li元素围绕X轴旋转
$("li").each(function(key,value){
//通过transform旋转
$(this).css({
"transform":"rotateX("+(index*90)+"deg)",
"transition-delay":(key*0.2)+"s"
});
});
//将flag在这次结束后变成true
setTimeout(function(){
flag=true;
},1000);
}
});
});
</script>
</body>
</html>
