总结： 1.布局时4张图片分别为一个立体长方体的4个侧面，屏幕为该长方体的几何中心。
2.注意点击左按钮，显示上一张图片，沿X轴旋转的是 90deg, 右按钮，则为 90deg
3.切割效果通过li过渡延时来实现，通过节流阀控制过渡完成的时间点，也就是下次点击事件可以触发的时间点。
效果图：
1.html:
<!--3d立体轮播图-->
<section class="box">
???<ul class="imageBox">
???????<!--把宽度分为5个部分-->
???????<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>
???<!--转义符 \ ???实体：$lt;-->
???<a href="javascript:;" class="left">< </a>
???<a href="javascript:;" class="right">> </a>
</section>
2.css样式：
<style>
???????* {
???????????margin: 0;
???????????padding: 0;
???????}
???????.box {
???????????width: 560px;
???????????height: 300px;
???????????margin: 100px auto;
???????????position: relative;
???????????/*overflow: hidden;*/
???????}
???????.box .imageBox {
???????????list-style: none;
???????????width: 100%;
???????????height: 100%;
???????}
???????.imageBox li {
???????????position: relative;
???????????float: left;
???????????width: 112px;
???????????height: 100%;
???????????/*视距属性 近大远小*/
???????????/*perspective: 500px;*/
???????????/*3d呈现*/
???????????transform-style: preserve-3d;
???????????transition: all 1s linear;
???????}
???????.imageBox li span {
???????????width: 100%;
???????????height: 100%;
???????????position: absolute;
???????????top: 0;
???????????left: 0;
???????}
???????/*image 同一个li下不同span样式*/
???????.imageBox li span:nth-child(1) {
???????????transform: translateZ(150px);
???????????background: url("images/1.jpg") no-repeat;
???????}
???????.imageBox li span:nth-child(2) {
???????????transform: rotateX(90deg) translateZ(-150px);
???????????background: url("images/2.jpg") no-repeat;
???????}
???????.imageBox li span:nth-child(3) {
???????????transform: rotateX(180deg) translateZ(150px);
???????????background: url("images/3.jpg") no-repeat;
???????}
???????.imageBox li span:nth-child(4) {
???????????transform: rotateX(270deg) translateZ(150px);
???????????background: url("images/4.jpg") no-repeat;
???????}
???????/*imageBox 不同li下 span样式*/
???????.imageBox li:nth-child(1) span {
???????????background-position: 0 0;
???????}
???????.imageBox li:nth-child(2) span {
???????????background-position: -112px 0;
???????}
???????.imageBox li:nth-child(3) span {
???????????background-position: -224px 0;
???????}
???????.imageBox li:nth-child(4) span {
???????????background-position: -336px 0;
???????}
???????.imageBox li:nth-child(5) span {
???????????background-position: -448px 0;
???????}
???????/*左右焦点样式*/
???????.box .left, .box .right {
???????????position: absolute;
???????????width: 50px;
???????????height: 70px;
???????????background-color: rgba(0, 0, 0, .3);
???????????line-height: 70px;
???????????top: 50%;
???????????display: block;
???????????color: #fff;
???????????font-size: 24px;
???????????text-align: center;
???????????text-decoration: none;
???????????font-weight: bold;
???????????margin-top: -35px;
???????}
???????.box .right {
???????????right: 0;
???????}
???</style>
3.基于jquery的js代码：
<script src="js/jquery-1.12.4.min.js"></script>
<script>
???<!--javascript代码-->
???$(function () {
???????/*1.设置索引
????????* 2. 给左右按钮注册点击事件
????????* 3. 沿x轴旋转
????????* 4. 节流阀控制动画完成下一次动画才可以开始*/
???????// 先关闭一次定时器，以为默认鼠标在box元素外，不关闭则开启了两个定时器
???????clearInterval(timeId);
???????var index = 0;
???????var flag=true;
???????$(‘.left‘).on(‘click‘, function () {
???????????if(!flag) return;
???????????flag=false;
???????????index--;
???????????var angel = -index * 90;
???????????$(‘li‘).css(‘transform‘, ‘rotateX(‘ + angel + ‘deg)‘).each(function (i, item) {
???????????????$(this).css(‘transition-delay‘,i*0.25+"s");
???????????})
???????});
???????$(‘.right‘).on(‘click‘, function () {
???????????if(!flag) return;
???????????flag=false;
???????????index++;
???????????var angel = -index * 90;
???????????$(‘li‘).css(‘transform‘, ‘rotateX(‘ + angel + ‘deg)‘).each(function (i, item) {
???????????????$(this).css(‘transition-delay‘,i*0.25+"s");
???????????})
???????});
// ???????做过渡完成后时间判断
???????$(‘.imageBox li:last‘).on(‘transitionend‘,function () {
???????????flag=true;
???????});
// ???????定时播放
???????var timeId=setInterval(function(){
???????????$(‘.box .right‘).trigger(‘click‘);
???????},2000);
// ???????当鼠标进入box容器，停止定时器
???????$(‘.box‘).on(‘mouseenter‘,function(){
???????????clearInterval(timeId);
???????})
???????// ???????当鼠标离开box容器，开启定时器
???????$(‘.box‘).on(‘mouseleave‘,function(){
???????????timeId=setInterval(function(){
???????????????$(‘.box .right‘).trigger(‘click‘);
???????????},3000);
???????})
???})
</script>
jquery 实现3d切割轮播图
原文地址：https://www.cnblogs.com/buautifulgirl/p/9739138.html