版权声明:部分来源于网络仅供学习交流 https://blog.csdn.net/Chad97/article/details/83275166
效果
页面结构
<div class="box">
<ul class="imageBox">
<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 class="left" href="javascript:;"><</a>
<a class="right" href="javascript:;">></a>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.box {
width: 560px;
height: 300px;
margin: 100px auto 0;
border: 1px solid #ccc;
position: relative;
}
.box .imageBox {
list-style: none;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.box .imageBox li {
width: 112px;
height: 100%;
float: left;
position: relative;
/*3d呈现*/
transform-style: preserve-3d;
/*加过渡*/
transition:all 1s ease;
}
.box .imageBox li span{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("images/1.jpg") no-repeat;
}
/*拼接立体容器*/
/*1.立体容器旋转中心要在电脑平面上*/
/*2.立体容器每一个面的图片正面朝外*/
.box .imageBox li span:nth-child(1){
background-image: url("images/1.jpg");
transform: translateZ(150px);
}
.box .imageBox li span:nth-child(2){
background-image: url("images/2.jpg");
/*旋转过后轴也会旋转::::::*/
transform: rotateX(90deg) translateZ(150px);
}
.box .imageBox li span:nth-child(3){
background-image: url("images/3.jpg");
transform: rotateX(180deg) translateZ(150px);
}
.box .imageBox li span:nth-child(4){
background-image: url("images/4.jpg");
transform: rotateX(270deg) translateZ(150px);
}
/*拼接背景*/
.box .imageBox li:nth-child(1) span{
background-position: 0 0;
}
.box .imageBox li:nth-child(2) span{
background-position: -112px 0;
}
.box .imageBox li:nth-child(3) span{
background-position: -224px 0;
}
.box .imageBox li:nth-child(4) span{
background-position: -336px 0;
}
.box .imageBox li:nth-child(5) span{
background-position: -448px 0;
}
.box .left,
.box .right{
position: absolute;
width: 50px;
height: 70px;
background: rgba(0,0,0,.2);
top:115px;
text-align: center;
line-height: 70px;
font-size: 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
.box .right{
right: 0;
}
注:
-如果不需要切割的效果,只要3D转换的效果把each去掉
jQuery
$(function () {
//定义一个索引
var index=0;
var flag=true;
$('.left').on('click',function () {
if (!flag) return false; //节流阀
flag=false;
index --;
console.log(index);
let angle= - index*90;
$('.imageBox>li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
//设置不同的延时
$(this).css('transition-delay',i*0.25+'s');
});
});
// 3.点击右边按钮下一张
$('.right').on('click',function () {
if (!flag) return false; //节流阀
flag=false;
index ++;
console.log(index);
let angle= - index*90;
$('.imageBox>li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
//设置不同的延时
$(this).css('transition-delay',i*0.25+'s');
});
/*4.优化 重复点击的时候动画会层叠的执行 节流阀 */
});
$('.imageBox>li:last').on('transitionend',function () {//监听最后一个li 的过渡结束
flag=true;
});
});