js实现三维(三维的缩写)图片环展示效果

可对整体进行拖拽

效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { padd :0；margin :0 font-family : ' Proxima Nova '，' proxima-nova '，' Helvetica内乌'，Helvetica，Arial，无衬线！重要；} html正文{overflow:隐藏；}正文{ background: # ccc}。盒子{宽度：140像素高度：200 px-web套件-转换-style : preserve-3d；-webkit-transform:透视(800像素)Rotatey(0度)Rotatex(0度)；位置：相对；margin:400px auto}。盒子跨度{宽度：140像素高度：200 px绝对位置：background : deeppskyblueffont-size :20 px；文本对齐：中心；行高：200 px颜色：白色；}/样式脚本函数r2n(n){返回n *数学.PI/180 }窗口。onload=function(){ var oBox=document。getelementsbyclassname(' box ')[0]；var aS=文档。getelementsbytagname(' span ')；for(var I=0；iaS.lengthI){ aS[I]。风格。webkittransition=' 1s all ease '(aS。长度-I)*。1的；aS[I]。风格。webkittransform=' Rotatey '(I * 360/aS。length ' deg)' translate ez(500 px)' } var pos=[]；var x=0；var y=0；定义变量计时器=nullvar timer2=nulldocument。onmousedown=function(ev){ timer=setInterval(function(){ pos[0]=pos[2]；位置[1]=位置[3];位置[2]=x；位置[3]=y；},30);var disx=ev。pagex-x；var disy=ev。佩吉。文件。onmousemove=function(ev){ x=ev。pagex-disx；y=ev。佩吉-迪斯；' oBox.style.WebkitTransform='透视(800 px)' ' Rotarey(' x/3 ' deg)' ' Rotartex('-y/3 ' deg)'；};文件。onmouseup=function(){ clearInterval(计时器);var speedx=pos[2]-pos[0]；变化速度=位置[3]-位置[1]；timer 2=SetInterval(function(){ x=speedx；y=快速；' oBox.style.WebkitTransform='透视(800 px)' ' Rotarey(' x/3 ' deg)' ' Rotartex('-y/3 ' deg)'；speedx *=0.94speedy *=0.94if(数学。ABS(speedx)1)speedx=0；if(数学。ABS(速度)1)速度=0；if(速度x==0速度==0){ clearInterval(定时器2)} }，30)；document . onmousemove=null document . onmouseup=null } }；返回false }/script/headdydiv class=' box ' span 1/span span 2/span span 3/span span span 4/span span span 5/span span span 6/span span span 7/span span span 8/span span span 9/span span span 10/span span span 11/span span 12/span/div/body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！