在圆形旋转 div 上对齐图像

Question

考虑到圆形（圆）parent div，我必须在它上面显示几个宽度和彼此之间的距离相同的图标，但它们需要与 parent div。我尝试使用旋转但需要动态计算度数。此外，圆形 parent 在几秒钟内旋转了 360 度。

目前我的解决方案：

app.js

 <div> className='parent'
        {data.map((item, i) => (
          <div
            className='inner'
            key={i}
          >
            <img
              width={64}
              src={item.itemImg}
              alt={item.id}
              style={{ transformOrigin: 'center'; transform: rotate(-45deg) }}
            />
          </div>
        ))}
      </div>

css

div.parent {
  width: 450px;
  height: 450px;
  border: 1px solid #bbb;
  border-radius: 50%;
  display: flex;
  justify-content: space-between;
  position: relative;
  animation: spin 50s linear infinite;
}

我有：

有没有办法跟随 parent 的形状？如果我将鼠标悬停在该元素上，我仍然会看到一个蓝色方块

期望：

Answer 1

这里有一个 CSS 的方法。

每本书div是一个长方形，底部在圆的中心，比圆的半径高20%。

每个矩形的顶部都有一个背景图片（在本例中是一本书）。

矩形根据 child 的数字旋转了一定的度数。此代码段使用 22.5 度作为底角。

整个东西都旋转了，所以书籍与 parent 圆保持相同的相对位置，并且它们的底部平行于圆的切线。

显然您需要更改尺寸、定位等以适合您的用例。

.container {
  /* positioned in center of viewport just for demo */
  display: inline-block;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  --r: 20vmin;
  /* radius of the circle */
  --t: 8;
  /* total number of books */
  position: relative;
  --w: calc(var(--r) * 1.2);
  /* the top of the book is 20% out further than the edge of the circle */
  width: calc(2 * var(--w));
  height: calc(2 * var(--w));
  margin: 0;
  padding: 0;
  animation: rotate 10s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circle::before {
  content: '';
  width: calc(2 * var(--r));
  aspect-ratio: 1 / 1;
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  top: calc(var(--r) * 0.2);
  left: calc(var(--r) * 0.2);
  display: inline-block;
  margin: 0;
  padding: 0;
}

.book {
  height: calc(var(--r) * 1.2);
  width: calc(var(--r) / 5);
  position: absolute;
  bottom: var(--w);
  left: calc(var(--w) - (0.5 * var(--r) / 5));
  transform-origin: center bottom;
  transform: rotate(calc(var(--n) * 22.5deg));
  position: absolute;
  background-image: url(https://i.stack.imgur.com/9XtVu.png);
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.book:nth-child(1) {
  --n: 1;
}

.book:nth-child(2) {
  --n: 2;
}

.book:nth-child(3) {
  --n: 3;
}

.book:nth-child(4) {
  --n: 4;
}

.book:nth-child(5) {
  --n: 5;
}

.book:nth-child(6) {
  --n: 6;
}

.book:nth-child(7) {
  --n: 7;
}

.book:nth-child(8) {
  --n: 8;
}

<div class="container">
  <div class="circle">
    <div class="book"></div>
    <div class="book"></div>
    <div class="book"></div>
    <div class="book"></div>
    <div class="book"></div>
    <div class="book"></div>
    <div class="book"></div>
    <div class="book"></div>
  </div>
</div>

在圆形旋转 div 上对齐图像

Align images over a rounded rotating div

css

animation

rotation

reactjs