代码如下： <style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } body{ background:#1e1e1f; overflow:hidden; } .box{ width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform:rotateX(-20deg) rotateY(0deg); } .box img{ width: 300px; height: 200px; position: absolute; left: calc(50% - 150px); top: calc(50% - 100px); border: 5px solid #ffffff; user-select: none; -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); } #wrap p{ width: 1200px; height: 1200px; background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0)); position: absolute; top:100%;left:50%; margin-top: -600px; margin-left: -600px; border-radius:600px; transform:rotateX(90deg); } </style> </head> <body > <div class="box" id="wrap"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <p></P> </div> </body> <script> setTimeout(init,100); function init(){ var imgArray = document.getElementsByTagName('img'); var deg = 360/imgArray.length;//单位度数 [].forEach.call(imgArray,function(node,index){ // console.log(index*deg);//每张图片应该旋转的度数 node.style.transform = "rotateY("+index*deg+"deg)translatez(350px)";//赋予给图片，并撑开350px node.style.transition = "1s "+(imgArray.length - index)*0.11+"s"; }); var newX,newY,pervX,pervY,minusX,minusY; var roY = 0 , roX = -10; var oWrap = document.getElementById("wrap");//通过id获取元素 var timer; // 拖拽：三个事件-按下 移动 抬起 //按下 document.onmousedown = function(ev){ ev = ev || window.event; //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错 lastX = ev.clientX; lastY = ev.clientY; //移动 this.onmousemove = function(ev){ ev = ev || window.event; clearInterval( timer ); nowX = ev.clientX; // clientX 鼠标距离页面左边的距离 nowY = ev.clientY; // clientY ………………………………顶部……………… //当前坐标和前一点坐标差值 minusX = nowX - lastX; minusY = nowY - lastY; //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快 roY += minusX*0.2; // roY = roY + minusX*0.2; roX -= minusY*0.1; oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)'; /* //生成div，让div跟着鼠标动 var oDiv = document.createElement('div'); oDiv.style.cssText = '5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px'; this.body.appendChild(oDiv); */ //前一点的坐标 lastX = nowX; lastY = nowY; } //抬起 this.onmouseup = function(){ this.onmousemove = null; timer = setInterval(function(){ minusX *= 0.95; minusY *= 0.95; roY += minusX*0.2; // roY = roY + minusX*0.2; roX -= minusY*0.1; oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)'; if ( Math.abs(minusX)<0.1 && Math.abs( minusY )<0.1 ) { clearInterval( timer ); } console.log( minusX ); },13); } return false; } }; </script>