html部分：
<body> <div id="perspective"> <div 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" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> <img src="img/9.jpg" /> <img src="img/10.jpg" /> <img src="img/11.jpg" /> <p></p> </div> </div> </body>
css部分：
* { margin: 0; padding: 0; } body { background: #000; overflow: hidden; } #perspective { perspective: 800px; } #wrap { width: 120px; /*133:200 4:6 */ height: 180px; margin: 0 auto; position: relative; /*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/ transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(0deg); } #wrap img { width: 100%; height: 100%; position: absolute; border-radius: 1px; box-shadow: 0 0 8px #f9f; transform: rotateY(0deg) translateZ(0px); /*倒影：朝向 偏移 遮盖*/ /*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/ -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, 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)); border-radius: 100%; position: absolute; left: 50%; top: 102%; margin-left: -600px; margin-top: -600px; transform: rotateX(90deg); }
js部分：
window.onload = function() { let oWrap = document.getElementById('wrap'); let oImg = oWrap.getElementsByTagName('img'); let oImgLength = oImg.length; let Deg = 360 / oImgLength; let nowX, nowY, lastX, lastY, minusX = 0, minusY = 0; let roY = 0, roX = -10; let timer; for (let i = 0; i < oImgLength; i++) { oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)'; oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's'; } mTop(); window.onresize = mTop; function mTop() { let wH = document.documentElement.clientHeight; oWrap.style.marginTop = wH / 2 - 180 + 'px'; } // 拖拽：三个事件-按下 移动 抬起 //按下 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跟着鼠标动 let oDiv = document.createElement('div'); oDiv.style.cssText = 'width: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; } }
网页效果：
