百行代码制作一个属于猫主子的3D场景照片墙#yyds干货盘点# _制作

【百行代码制作一个属于猫主子的3D场景照片墙#yyds干货盘点#】实践是知识的母亲，知识是生活的明灯。这篇文章主要讲述百行代码制作一个属于猫主子的3D场景照片墙#yyds干货盘点#相关的知识，希望能为你提供帮助。
你有猫么？想不想给猫主子做个照片墙
结构代码

< div id="perspective"> < !--wrap start--> < div id=wrap> < img src="https://www.songbingjia.com/android/images/1.jpg"/> < img src="https://www.songbingjia.com/android/images/2.jpg"/> < img src="https://www.songbingjia.com/android/images/3.jpg"/> < img src="https://www.songbingjia.com/android/images/4.jpg"/> < img src="https://www.songbingjia.com/android/images/5.jpg"/> < img src="https://www.songbingjia.com/android/images/6.jpg"/> < img src="https://www.songbingjia.com/android/images/7.jpg"/> < img src="https://www.songbingjia.com/android/images/8.jpg"/> < img src="https://www.songbingjia.com/android/images/9.jpg"/> < img src="https://www.songbingjia.com/android/images/10.jpg"/> < img src="https://www.songbingjia.com/android/images/11.jpg"/> < p> < /p> < /div> < !--wrap end--> < /div>

样式代码

* margin: 0; padding: 0; body background: #222; overflow: hidden; #perspective perspective: 800px; #wrap width: 120px; /*133:2004: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; box-shadow: 0 0 8px #000000; 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%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; #wrap p width: 1200px; height: 1200px; background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 124, 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);

表现代码

window.onload = function() var oWrap = document.getElementById(wrap); var oImg = oWrap.getElementsByTagName(img); var oImgLength = oImg.length; var Deg = 360 / oImgLength; var nowX, nowY, lastX, lastY, minusX = 0, minusY = 0; var roY = 0, roX = -10; var timer; for (var 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() var 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); //前一点的坐标 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); , 13); return false;

最后
如果对您有帮助，希望能给个