JavaScript + jQuery 实现 3D 旋转木马效果

最新推荐文章于 2024-07-15 18:00:00 发布

MatchaEmerald

最新推荐文章于 2024-07-15 18:00:00 发布

阅读量278

点赞数 2

分类专栏：原生 JavaScript demo 文章标签： jquery 算法前端 javascript 3d html5 css

本文链接：https://blog.csdn.net/weixin_52872413/article/details/134210819

版权

原生 JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

demo

1 篇文章 0 订阅

订阅专栏

HTML 代码

<div class="perspective">
  <div class="wrap main">
    <img draggable="false" src="./imgs/九柱/套图5/岩柱.jpg" alt="" />
    <img draggable="false" src="./imgs/九柱/套图5/恋柱.jpg" alt="" />
    <img draggable="false" src="./imgs/九柱/套图5/水柱.jpg" alt="" />
    <img draggable="false" src="./imgs/九柱/套图5/炎柱.jpg" alt="" />
    <img draggable="false" src="./imgs/九柱/套图5/虫柱.jpg" alt="" />
    <img draggable="false" src="./imgs/九柱/套图5/蛇柱.jpg" alt="" />
    <img draggable="false" src="./imgs/九柱/套图5/霞柱.jpg" alt="" />
    <img draggable="false" src="./imgs/九柱/套图5/音柱.jpg" alt="" />
    <img draggable="false" src="./imgs/九柱/套图5/风柱.jpg" alt="" />
  </div>
</div>

CSS 代码

html {
        height: 100%;
        /* background: #f0f0f0; */
        /* background-image: linear-gradient(to bottom, #333, #fff); */
        background: url(./imgs/九柱/九柱2.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .perspective {
        perspective: 800px;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .wrap {
        margin: 0 auto;
      }

      @keyframes img {
        0% {
          transform: rotateX(-10deg) rotateY(0deg);
        }

        100% {
          transform: rotateX(-10deg) rotateY(360deg);
        }
      }

      .perspective .main {
        position: relative;
        transform-style: preserve-3d;
        width: 130px;
        height: 180px;
        margin-top: 300px;
        transform: rotateX(-10deg);
        /* transition: transform .3s linear; */
        animation: img 10s linear 2s infinite;
      }

      .perspective .main > img {
        position: absolute;
        transform-style: preserve-3d;
        transition: all 1s;
        /* transform: rotateY(0deg) translateY(0px); */

        -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(
                0,
                0,
                0,
                0
              )
              40%, rgba(0, 0, 0, 0.5) 100%);
      }

JS 代码

 <!-- 引入JQ -->
 <script src="./jQuery/jquery-3.6.1.min.js"></script>

 <script>
      var deg = 0;
      var s = 0;

      var start_x = (last_x = 0);
      var start_y = (last_y = 0);

      $(".main img").each(function (i, vl) {
        deg += 40;
        s += 0.1;
        $(vl).css("transform", `rotateY(${deg}deg) translateZ(350px)`);
        $(vl).css("transition", `transform 1s ease ${s}s`);
      });

      document.querySelector("html").onmousedown = function (e) {
        start_x = e.pageX;
        start_y = e.pageY;

        document.onmousemove = function (e) {
          var move_x = e.pageX - start_x;
          var move_y = e.pageY - start_y;

          last_x = move_x;
          last_y = move_y;

          $(".main").css(
            `transform`,
            `rotateX(${-last_y}deg) rotateY(${last_x}deg)`
          );

          // 鼠标移动时不会选中所有元素
          window.getSelection
            ? window.getSelection().removeAllRanges()
            : document.selection.empty();
        };

        document.onmouseup = function () {
          document.onmousemove = null;
        };
      };

</script>