css 使用transform-origin实现绕顶点旋转

原创
10/13 23:19
阅读数 75

通过animejs 设置旋转角度和循环

通过 transform-origin 设置旋转中心点

注意元素的中心是left, top加上宽和高的一半, 不能单单使用left和top定位, 会出现一些问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/rematrix"></script>
    <script src="https://animejs.com/lib/anime.min.js"></script>
    <style>
      .wrap {
        width: 500px;
        height: 500px;
        background: deepskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .circle {
        display: flex;
        position: absolute;
        width: 20px;
        height: 20px;
        background: green;
        left: 0;
        /* top: 50%; */
      }

      .center {
        width: 20px;
        height: 20px;
        background: red;
      }
    </style>
  </head>
  <body>
    <button onclick="rotate()">rotate</button>
    <br />
    <br />
    <br />
    <div class="wrap">
      <div id="box" class="center"></div>
      <div id="circle" class="circle"></div>
    </div>
    <script>
      const box = document.getElementById("circle");
      async function rotate(direction) {
        // 注意需要加上自己本身的大小
        circle.style["transform-origin"] = "260px 0px";
        anime({
          targets: box,
          duration: 3000,
          loop: true,
          easing: "linear",
          rotateZ: [0, "360deg"],
        });
      }
    </script>
  </body>
</html>

 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部