<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<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>
<style>
.box {
width: 560px;
height: 300px;
margin: 100px auto;
border: 1px solid #ccc;
position: relative;
}
.box a {
width: 40px;
height: 60px;
background: rgba(0, 0, 0, 0.4);
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
position: absolute;
top: 120px;
text-decoration: none;
}
.box .prev {
left: 0;
}
.box .next {
right: 0;
}
.box ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.box ul li {
width: 112px;
height: 300px;
float: left;
position: relative;
/*真正意义3D呈现*/
transform-style: preserve-3d;
}
.box ul li span {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.box ul li span:nth-child(1) {
background: url("../04-code/images/02-3d-transform/images/1.jpg") no-repeat;
/*正面*/
transform: translateZ(150px);
}
.box ul li span:nth-child(2) {
background: url("../../../Desktop/h5c3/C3day02/04-code/02-3d-transform/images/2.jpg") no-repeat;
/*上面*/
transform: translateY(-150px) rotateX(90deg);
}
.box ul li span:nth-child(3) {
background: url("../../../Desktop/h5c3/C3day02/04-code/02-3d-transform/images/3.jpg") no-repeat;
/*背面*/
transform: translateZ(-150px) rotateX(180deg);
}
.box ul li span:nth-child(4) {
background: url("../../../Desktop/h5c3/C3day02/04-code/02-3d-transform/images/4.jpg") no-repeat;
/*下面*/
transform: translateY(150px) rotateX(270deg);
}
.box ul li:nth-child(1) span {
background-position: 0 0;
}
.box ul li:nth-child(2) span {
background-position: -112px 0;
}
.box ul li:nth-child(3) span {
background-position: -224px 0;
}
.box ul li:nth-child(4) span {
background-position: -336px 0;
}
.box ul li:nth-child(5) span {
background-position: -448px 0;
}
</style>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
<script src="../../../Desktop/h5c3/C3day02/04-code/02-3d-transform/jquery.min.js"></script>
<script>
$(function () {
/*1. 点击prev 切换上一张*/
/*2. 点击next 切换下一张*/
/*开关*/
var flag = true;
/*轮播图*/
var index = 0;
/*核心点 索引 计算 需要旋转的角度 */
$('.prev').on('click',function () {
/*根据开关去限制按钮是否可以点击*/
if(!flag) return;
flag = false;
/*上一张*/
index --;
/*怎么根据index计算角度*/
var angle = - index * 90 + 'deg';
/*动画的旋转*/
$('li').css({'transition':'all 1s','transform':'rotateX('+angle+')'}).each(function (i, item) {
$(item).css({'transition-delay':i*0.25+'s'});
});
});
$('.next').on('click',function () {
/*根据开关去限制按钮是否可以点击*/
if(!flag) return;
flag = false;
/*下一张*/
index ++;
/*怎么根据index计算角度*/
var angle = - index * 90 + 'deg';
/*动画的旋转*/
$('li').css({'transition':'all 1s','transform':'rotateX('+angle+')'}).each(function (i, item) {
$(item).css({'transition-delay':i*0.25+'s'});
});
});
/*处理:
当动画正在执行 不能执行下一次动画(让点击无效)
当动画执行完毕 开启你执行动画的功能*/
/*当动画结束 flag = true ;*/
/*具体:监听到最后一个LI元素的过渡结束*/
$('li:last-child').on('transitionend',function () {
console.log('ok');
flag = true;
});
});
</script>
</body>
</html>
3D切割轮播图
最新推荐文章于 2024-08-26 09:57:43 发布