分析：创建一个列DIV：从上图我们可以看出每次旋转的动画都是由多个列的小卡片组成的；每列都基于其下标。背景错位，达到拼接的效果，整体看起来像一幅画。让我们看看它到底是什么样子的：colNode(){//生成列的节点for(vari=0;ithis.colLen/2?this.colLen-i:i);this.swiperEle.appendChild(iDivCol);}}三维构图：旋转三维感觉是怎么形成的？原理其实很简单。可以理解为每一列都是一个三维的魔方。它们都是相互独立的。每列backgroundPosition:index*xcolW，进行一次位移。简单来说，每一列都是由里面的6个面组成的。每个surface都以parent为目标设置，比如position，transform等，一张图让你看懂整个世界：——图5是完成的输出//——[front,top,left,right]for(vari=0;i<4;i++){letdividingLine=i<2;letspan=document.createElement('span');span.className=`${dividingLine?'bg-img':'纯色'}i${i}`;span.style.width=`${dividingLine?this.colW:this.cubeH}px`;span.style.height=this.cubeH+'px';if(dividingLine){跨度。style.backgroundPosition=`-${index*this.colW}px0`;};iDivCol.appendChild(span);};单列布局结构：zIndex/四边样式/...省略N行.div-colspan.i1{/*top*/transform-origin:top;变换：translateZ(-360px)rotateX(90deg);}.div-colspan.i2{/*left*/transform-origin:left;transform:rotateY(90deg);}.div-colspan.i3{/*right*/transform-origin:left;transform:translateX(25px)rotateY(90deg);}切换：div-coltransform-origin:50%50%-180px鼠标通道都实现了，还远吗在上下页面之间切换？之前创建结构的时候，我们知道div的列数。为了更好的安装B，我们需要在旋转的时候给每一列加一定的延迟setTimeout，从而达到缓冲视差，然后requestAnimationFrame应该出来了，setInterval已经成为过去式了。在旋转之前，需要设置下一页和要显示的图片。当然，旋转完成后记得重新设置角度。...省略N行swiperAnimate(){const_requestAnimationFrame_=window.requestAnimationFrame||window.WebkitRequestAnimationFrame;constiDivCol=this.swiperEle.querySelectorAll(".div-col");for(vari=0;i{//对每一列进行延时，达到缓冲的效果this.rotate(Col,0,spanSurface,animationFrame);},index*this.delayMilli);}...省去N行上下翻页：旋转的效果上面已经基本实现了，再加上一些修改，点击的功能上下切换，需要注意的是，为了防止重复点击，在当前旋转的时候不能点击：pageDown(){if(this.status){console.log("向下滚动，不能点击")返回;};this.status=1;this.pageNum=this.pageNum>;=this.imageList.length？1:++this.pageNum;this.swiperAnimate();}预加载：由于轮播图片较多，本例每次只加载两张图片，因此需要对图片进行一次预加载，以及图片加载错误后进行过滤，以免影响后续效果的渲染：preloadingImage(){this.imageList.map((k,v)=>{letimgNode=newImage();imgNode.onerror=err=>{this.imageList.splice(v,1);}imgNode.src=k;});}总结：实现一个效果的方法有很多种，比如我们可以设置6张脸，每个设置，都是展示一张图片，这样就不用每次旋转后重新设置图片，角度等问题，包括requestAnimationFrame动画切换的transition过程，应该有更好的方法，欢迎大家指出以上就是今天的内容你带来分享，你得到了吗？觉得不错记得点个赞
