利用JavaScript制作一个酷炫的3D图片演示

　　// 滚轮滚动

　　// 监听鼠标滚轮事件，该函数不用调用直接生效

　　document.onmousewheel = function(e){

　　// console.log(e)

　　e = e || window.event

　　var d = e.wheelDelta / 10 || -e.detail

　　radius += d

　　init(1)

　　}

　　var sX,sY,nX,nY,desX = 0 , desY = 0, tX = 0,tY = 0;

　　// 鼠标拖动页面

　　document.onpointerdown = function(e){

　　// console.log(e);

　　e = e || window.event//防止出错,如果e不存在，则让window.event为e

　　var sX = e.clientX,

　　sY = e.clientY

　　//监听鼠标移动函数

　　this.onpointermove = function(e){

　　console.log(e);

　　e = e || window.event//防止出错,如果e不存在，则让window.event为e

　　var nX = e.clientX,

　　nY = e.clientY;

　　desX = nX - sX;//在x轴上滑动的距离

　　desY = nY - sY;

　　tX += desX * 0.1

　　tY += desY * 0.1

　　// 让页面跟着鼠标动起来

　　applyTransform(oDarg)

　　}

　　this.onpointerup = function(e){

　　//每个多久实现一次setInterval

　　oDarg.timer = setInterval(function(){

　　desX *= 0.95

　　desY *= 0.95

　　tX += desX * 0.1

　　tY += desY * 0.1

　　applyTransform(oDarg)

　　playSpin(false)

　　if(Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5){

　　clearInterval(oDarg.timer)

　　playSpin(true)

　　}

　　},17)

　　this.onpointermove = this.onpointerup = null

　　}

　　return false

　　}

　　function applyTransform(obj){

　　if(tY > 180)tY = 180

　　if(tY < 0)tY = 0

　　obj.style.transform = `rotateX(${-tY}deg) rotateY(${tX}deg)`

　　}

　　function playSpin(yes){

　　oSpin.style.animationPlayState = (yes ? 'running' : 'paused')

　　}