3D 旋转可拖拽相册

直接拿走可用，图片路径换下就OK
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="title" content="" />
    <meta name="Description" content="" />

    <meta name="Keywords" content="" />

    <title>css3 旋转 拖拽 相册特效 lesson</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      /* img {
        width: 130px;
        height: 180px;
      } */
      body {
        background-color: #222;
        /* 设置景深 */
        perspective: 800px;
      }
      #wrap {
        position: relative;
        /* 3d 视觉 */
        transform-style: preserve-3d;
        width: 120px;
        height: 180px;
        margin: auto;
      }
      #wrap img {
        position: absolute;
        top: 0;
        box-shadow: 0 0 10px #000000;
        /* 倒影  方向 偏移量 */
        -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(
                0,
                0,
                0,
                0
              )
              40%, rgba(0, 0, 0, 0.5));
        /* -moz-box-reflect: below 5px -moz-linear-gradient(top, rgba(0, 0, 0, 0)
              40%, rgba(0, 0, 0, 0.5)); */
        border-radius: 5px;
        transform: rotateX(-20deg) translateY(0deg);
        /* 旋转过度 */
        /* 动画执行的时间 */
        transition: 1s 0.5s;
        width: 130px;
        height: 200px;
      }
      #wrap p {
        position: absolute;
        top: 50%;
        margin-top: -600px;
        margin-left: -600px;
        width: 1200px;
        height: 1200px;
        border-radius: 50%;

        transform: rotateX(90deg);
        background-color: rgba(122, 122, 122, 0.01);
        background: radial-gradient(
          center,
          center,
          600px,
          600px,
          rgba(122, 122, 122, 0.3),
          rgba(122, 122, 122, 0)
        );
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <img src="./img/1.jpg" alt="" />
      <img src="./img/2.jpg" alt="" />
      <img src="./img/3.jpg" alt="" />
      <img src="./img/4.jpg" alt="" />
      <img src="./img/5.jpg" alt="" />
      <img src="./img/6.jpg" alt="" />
      <img src="./img/7.jpg" alt="" />
      <img src="./img/8.jpg" alt="" />
      <img src="./img/9.jpg" alt="" />
      <img src="./img/10.jpg" alt="" />
      <img src="./img/11.jpg" alt="" />
      <p></p>
    </div>
    <script>
      let oWrap = document.getElementById('wrap');
      let aImg = oWrap.getElementsByTagName('img');

      // 获取图片的个数
      let len = aImg.length;
      // 让盒子自适应的垂直居中
      function mTop() {
        // 获取浏览器窗口 可视区域的高度
        let H = document.documentElement.clientHeight;
        // console.log(H);

        oWrap.style.marginTop = H / 2 - 180 + 'px';
      }

      mTop();
      // 页面大小发生改变的时候调用 使其可以一直居中
      window.onreset = mTop;

      // 图片初始循环
      for (let i = 0; i < len; i++) {
        // 11张图片 的个数均分旋转360度
        let Deg = 360 / len;
        aImg[i].style.transform =
          'rotateY(' + i * Deg + 'deg) translateZ(350px) ';
        // 每一个的延迟时间越来越短
        aImg[i].style.transition = '1s ' + (len - 1 - i) * 0.1 + 's';
      }

      var newX,
        newY,
        lastX,
        lastY,
        minusX,
        minusY,
        rotX = -20,
        rotY = 0,
        a = 10;

      // 鼠标（按下 抬起 移动）拖拽旋转
      document.onmousedown = function (ev) {
        //  事件的兼容
        // var ev = ev || window.event;
        // 第一次的初始值
        lastX = ev.clientX;
        lastY = ev.clientY;
        console.log(lastX);

        this.onmousemove = function (ev) {
          // var ev = ev || window.event;
          console.log(this);

          console.log(lastX);
          newX = ev.clientX;
          newY = ev.clientY;

          minusX = newX - lastX;
          minusY = newY - lastY;
          rotX -= minusY * 0.025;
          rotY += minusX * 0.025; // 插值累加 成为新的旋转度数值

          oWrap.style.transform =
            'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
        };

        this.onmouseup = function () {
          this.onmousemove = null;
          // 新值用完之后就变成了 旧的值
          lastX = newX;
          lastY = newY;
          // this.onmouseup = null;
          timer = setInterval(function () {
            minusX = minusX * 0.95;
            minusY = minusY * 0.95;

            // 
          }, 1000 / 60);
        };
        return false;
      };
    </script>
  </body>
</html>