css旋转

最新推荐文章于 2023-10-25 17:25:10 发布

仰淮

最新推荐文章于 2023-10-25 17:25:10 发布

阅读量132

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/huai42717/article/details/128293090

版权

html

<div class="container">
      <div class="item">
        <img src="https://s1.ax1x.com/2022/12/12/z4UfOS.jpg" alt="" />
      </div>
      <div class="item">
        <img src="https://s1.ax1x.com/2022/12/12/z4UfOS.jpg" alt="" />
      </div>
      <div class="item">
        <img src="https://s1.ax1x.com/2022/12/12/z4UfOS.jpg" alt="" />
      </div>
      <div class="item">
        <img src="https://s1.ax1x.com/2022/12/12/z4UfOS.jpg" alt="" />
      </div>
      <div class="item">
        <img src="https://s1.ax1x.com/2022/12/12/z4UfOS.jpg" alt="" />
      </div>
      <div class="item">
        <img src="https://s1.ax1x.com/2022/12/12/z4UfOS.jpg" alt="" />
      </div>
    </div>

css

 .container {
        position: relative;
        width: 500px;
        height: 500px;
        margin-left: 200px;
        margin-top: 200px;
        border-radius: 100%;
        border: 1px solid gray;
        animation: rotate linear infinite 20s;
      }
      .container div {
        position: absolute;
        top: 200px;
        left: 200px;
      }
      .container img {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        animation: rotate 20s linear infinite reverse;
      }
      @keyframes rotate {
        to {
          transform: rotate(360deg);
        }
      }

<script>
      const items = document.querySelectorAll(".container .item");
      console.log(items);
      const r = document.querySelector(".container").clientWidth / 2;
      const count = items.length;
      const pieceDeg = 360 / count;
      for (let i = 0; i < count; i++) {
        let t = i * pieceDeg;
        t = (Math.PI / 180) * t;
        const x = Math.sin(t) * r,
          y = -Math.cos(t) * r;
        items[i].style.transform = `translate(${x}px,${y}px)`;
      }
    </script>