美文网首页
3D 旋转可拖拽相册

3D 旋转可拖拽相册

作者: lessonSam | 来源:发表于2020-05-05 21:11 被阅读0次

    直接拿走可用,图片路径换下就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>
    
    

    相关文章

      网友评论

          本文标题:3D 旋转可拖拽相册

          本文链接:https://www.haomeiwen.com/subject/mibvghtx.html