在圓形旋轉div上對齊影像-有解無憂

考慮到圓形（圓形）父 div，我必須在其頂部顯示幾個具有相同寬度和彼此距離的圖示，但它們需要與父 div 平行。我嘗試使用旋轉但需要動態計算度數。圓形的父母也在幾秒鐘內旋轉了 360 度。

到目前為止我的解決方案：

應用程式.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;
}

我擁有的：

在圓形旋轉 div 上對齊影像

有沒有辦法跟隨父母的形狀？如果我將滑鼠懸停在元素上，我仍然會看到一個藍色方塊

在圓形旋轉 div 上對齊影像

期望：

在圓形旋轉 div 上對齊影像

uj5u.com熱心網友回復：

這是一種 CSS 方法。

每個書的 div 都是一個矩形，它的底部位于圓的中心，比圓的半徑高 20%。

這些矩形中的每一個在頂部都有一個背景影像（在本例中是一本書）。

矩形根據其子編號旋轉若干度。此代碼段使用 22.5 度作為基準。

在圓形旋轉 div 上對齊影像

整個事物被旋轉，因此書籍與父圓保持相同的相對位置，并且它們的底部平行于圓的切線。

顯然，您需要更改尺寸、定位等以適合您的用例。

.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/440964.html

標籤：css 反应动画回转

上一篇：是否可以為洗掉線制作影片？CSS/JS

下一篇：使用svg.js為遠光濾鏡制作影片