前言 玩完3D魔方，这次带大家一起玩玩性感美女秀，正常套路，有兴趣的请先速停，继续，没兴趣的也可以看看美女养眼~！想直接在线预览？大家早上好，这里是@IT·平头哥联盟，我是首席填坑官?苏楠，用心分享做一只温暖的攻城狮。公众号:honeyBadger8,群:912594095点评: 上次看过3D魔方的同学对这次分析会有帮助。当然，如果你是大佬，已经玩过css3上的666，那么下面的分解还请各位老师担当。如有不足之处，请指正。CSS3·画出最懂你的3D魔方Canvas·手把手教你画跑车每一列根据下标移动背景，达到拼接的效果，整体像一幅画一起来看看它的真实样子：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,对]for(vari=0;i<4;i++){让dividingLine=i<2;让span=document.createElement('span');span.className=`${dividingLine?'bg-img':'pure-color'}i${i}`;span.style.width=`${dividingLine?this.colW:this.cubeH}px`;span.style.height=this.cubeH+'px';如果（除ingLine){span.style.backgroundPosition=`-${index*this.colW}px0`;};iDivCol.appendChild(span);};单列布局结构：colNode方法中的zIndex，需要注意hierarchy调整可以覆盖立体透视、单列html布局和按键样式带来的影响，/*四边样式*/...omitNlines.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);}切换：布局完成后，我们只需要操作series[div-col]进行旋转，然后如图transform-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行toturnpagesupanddown:旋转的效果上面已经基本实现了，再加上一些修改，点击上下切换的功能，需要注意的是防止重复点击，不能在当前旋转的时候点击进行中：pageDown(){if(this.status){console.log("向下滑动，无法点击")return;};这个.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过程，应该还有更好的办法。新手在路上，欢迎大家指点以上就是今天为大家带来的分享，大家GET了吗？觉得不错记得点个赞哦。想要第一时间获取最新分享，请扫描二维码关注我的个人公众号：honeyBadger8，？！文章源码获取->blog-resource?想直接在线预览？更多文章：如何用CSS3画出一个看得懂你的3D魔方？SVGSpritesIconimmutability的使用技巧因React的正式亮相而总结分享！又一个小程序项目的填坑笔记做完小程序项目，老板给我加了6k工资~面试踩过的坑都在这里~你应该做的前端性能优化总结！如何设置localStorage的过期时间？教你画跑车作者：苏南-首席灌装官来源：@IT·平头哥联系链接：https://blog.csdn.net/weixin_...通讯：912594095，公众号：honeyBadger8本文原创，版权归作者所有。商业转载请联系@IT·平头哥联盟获得授权。非商业转载请注明原文链接和出处。
