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

攻城狮杰森

发布于 2022-06-03 13:50:12

7830

发布于 2022-06-03 13:50:12

文章被收录于专栏：技术集锦技术集锦

👲👲作者主页：🔗杰森的博客 📒📒本文摘要：用前端的知识实现立体滚动照片墙

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

index.html

<!--
 * @Author: coder-jason
 * @Date: 2022-04-20 11:38:07
 * @LastEditTime: 2022-04-20 12:27:05
-->
<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>超火🔥照片墙</title>
      <link rel="stylesheet" href="./style.css">
      <link rel="icon" type="image/png" href="https://coder-jason.cn/images/favicon-32x32.png">
</head>

<body>
      <div class="perspective">
            <div class="wrap" id="imgwrap">
                  <img src="./img/1.jpg" alt="demo">
                  <img src="./img/2.jpg" alt="demo">
                  <img src="./img/3.jpg" alt="demo">
                  <img src="./img/4.jpg" alt="demo">
                  <img src="./img/5.jpg" alt="demo">
                  <img src="./img/6.jpg" alt="demo">
                  <img src="./img/7.jpg" alt="demo">
                  <img src="./img/8.jpg" alt="demo">
                  <img src="./img/9.jpg" alt="demo">
                  <img src="./img/10.jpg" alt="demo">
                  <img src="./img/11.jpg" alt="demo">
                  <img src="./img/12.jpg" alt="demo">
                  <img src="./img/13.jpg" alt="demo">
                  <img src="./img/14.jpg" alt="demo">
                  <img src="./img/15.jpg" alt="demo">
                  <img src="./img/16.jpg" alt="demo">
                  <img src="./img/17.jpg" alt="demo">
                  <img src="./img/18.jpg" alt="demo">
                  <img src="./img/19.jpg" alt="demo">
                  <img src="./img/20.jpg" alt="demo">
            </div>
      </div>
      <script type="text/javascript" src="script.js"></script>
</body>

</html>

style.css

/* 
 * @Author: coder-jason
 * @Date: 2022-04-20 11:38:07
 * @LastEditTime: 2022-04-20 12:27:38
*/
* {
      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);
}

script.js

/*
 * @Author: coder-jason
 * @Date: 2022-04-20 12:19:54
 * @LastEditTime: 2022-04-20 12:25:45
 */
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;
      }
}

完整项目地址：