版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
目录
1.需求：
点击左右按钮会出现3D翻转的效果，具体请复制文末代码自行运行
2.关键步骤
① 此轮播图只有4张图片，初始是重合在一起的
② 代码思想：轮播图使用5个li标签，每个li有4个span，初始给li和span进行定位，让span重合在一起，span的背景是要翻转的图片，之后对span进行移位及翻转，达到立方体4个面的位置。而每个li的第n个span刚好构成第n幅图片。之后当点击时，只是每个li块的翻转延时不同，所以达到立体翻转的效果。
3. 图片（自己在代码里更改图片位置）
4.代码（注释清晰）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
ul {
list-style: none;
width: 230px;
height: 254px;
margin: 100px auto;
/*旋转30度方便观察*/
/*transform: rotate3d(1,1,0,-30deg); */
/*保留偏移后的效果*/
transform-style: preserve-3d;
}
ul>li {
/* 每个li占20%，5个li就能拼成一幅图 */
width: 20%;
height: 100%;
/* 让li都float，这样就能拼成一副图 */
float: left;
/* 让li的4个部分重合，然后移动旋转，现在先定位 */
position: relative;
transition: transform .4s;
/*保留偏移后的效果*/
transform-style: preserve-3d;
}
/* 每个li的第一个span合成前面的第一幅图 */
ul>li>span:nth-of-type(1) {
width: 100%;
height: 100%;
position: absolute;
background: url(images/img1.png);
/*向前平移半个高(因为是立方体，所以这里必须是高)*/
transform: translateZ(127px);
}
/* 每个li的第二个span合成前面的第二幅图 */
ul>li>span:nth-of-type(2) {
width: 100%;
height: 100%;
position: absolute;
/* 第二幅图向上平移半个高，顺时针旋转90度，做顶部 */
transform: translateY(-127px) rotateX(90deg);
background: url(images/img2.png);
}
/* 每个li的第三个span合成前面的第三幅图 */
ul>li>span:nth-of-type(3) {
width: 100%;
height: 100%;
position: absolute;
/* 第三幅图向后平移半个高，顺时针旋转180度,做最后面的图*/
transform: translateZ(-127px) rotateX(180deg);
background: url(images/img3.png);
}
/* 每个li的第四个span合成前面的第四幅图 */
ul>li>span:nth-of-type(4) {
width: 100%;
height: 100%;
position: absolute;
/* 顺时针旋转90度，向下平移半个高度，做底部的图 */
transform: translateY(127px) rotateX(-90deg);
background: url(images/img4.png);
}
/* 因为现在是每个li元素只显示了图片的20%
让每个li元素的向左平移100%，就可解决这一问题 */
ul>li:nth-of-type(2)>span {
background-position: -100% 0;
}
ul>li:nth-of-type(3)>span {
background-position: -200% 0;
}
ul>li:nth-of-type(4)>span {
background-position: -300% 0;
}
ul>li:nth-of-type(5)>span {
background-position: -400% 0;
}
.pre,
.next {
width: 40px;
height: 50px;
line-height: 40px;
top: 50%;
transform: translate(0, -50%);
color: #fff;
font-size: 30px;
background: rgb(0, 0, 0, 0.4);
text-decoration: none;
position: absolute;
text-align: center;
}
.pre {
left: 0;
}
</style>
</head>
<body>
<div>
<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>
<a href="javascript:;" class="pre"><</a>
<a href="javascript:;" class="next">></a>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
// 为左右点击按钮添加切换事件
$(function() {
// 控制li翻转的参数
var index = 0;
// 节流阀，消除快速点击时出现的快速翻页的情况
var flag = true;
// 拿到下一张的类
$('.next').on('click', function() {
if (flag) {
// 调节翻转的度数
index--;
// 改变flag,节流阀作用
flag = false;
// 获取所有的li标签
$('li').each(function(key, value) {
// 改变li的css属性进行转换
$(this).css({
'transform': 'rotateX(' + (index * 90) + 'deg)',
'transition-delay': (key * 0.2) + 's'
})
});
// 1秒之后改变flag，点击事件重新起作用
setTimeout(function() { flag = true; }, 1000);
}
})
// 拿到上一张的类
$('.pre').on('click', function() {
if (flag) {
// 调节翻转的度数
index--;
// 改变flag,节流阀作用
flag = false;
// 获取所有的li标签
$('li').each(function(key, value) {
// 改变li的css属性进行转换
$(this).css({
'transform': 'rotateX(' + (index * 90) + 'deg)',
'transition-delay': (key * 0.2) + 's'
})
});
// 1秒之后改变flag，点击事件重新起作用
setTimeout(function() { flag = true; }, 1000);
}
})
})
</script>
</body>
</html>