超火 3D 照片墙，你学废了吗？

作者主页：杰森的博客
本文摘要：用前端的知识实现立体滚动照片墙
感觉本文还不错的话，还请各位小伙伴点赞➕收藏⭐➕评论支持杰森呀✌️

话不多说，直接上源码！！！

* {
      margin: 0; 
      padding: 0;
}

body {
      background: #222;
      overflow: hidden;
      user-select: none;
      background-image: url(./img/bgi.png);
}

.perspective {
      perspective: 800px;
}

.wrap {
      width: 95px;
      height: 200px;
      margin: 100px auto;
      position: relative;
      transform: rotateX(-20deg) rotateY(0deg);
      transform-style: preserve-3d;
}

.wrap img {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      transform: rotateY(0deg) translateZ(0px);
      background: transparent;
      box-shadow: 0 0 4px #fff;
      border-radius: 5px;
}

.wrap p {
      width: 1200px;
      height: 1200px;
      background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
      position: absolute;
      border-radius: 50%;
      left: 50%;
      top: 100%;
      margin-left: -600px;
      margin-top: -600px;
      transform: rotateX(90deg);
}

var oImg = document.getElementsByTagName("img")
var len = oImg.length;
console.log(len)
var deg = 360 / len;
var oWrap = document.getElementById("imgwrap");
window.onload = function () {
      Array.prototype.forEach.call(oImg, function (ele, index, self) {
            ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
            ele.style.transition = "1s " + (len - index) * 0.1 + "s";
      });
}
var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
document.onmousedown = function (e) {
      lastX = e.clientX;
      lastY = e.clientY;
      this.onmousemove = function (e) {
            newX = e.clientX;
            newY = e.clientY;
            minusX = newX - lastX;
            minusY = newY - lastY;
            rotX -= minusY * 0.2;
            rotY += minusX * 0.1;
            oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
            lastX = newX;
            lastY = newY;
      }
      this.onmouseup = function (e) {
            this.onmousemove = null;
      }
}

完整项目地址：

https://github.com/PDPENG/share-code