如何使用 CSS 和 jQuery 有效地旋轉多個物件成一圈？

使用CSS 旋轉多個物件在一個圓圈中：綜合指南

在本文中，我們探討了在一個圓圈中旋轉多個對象的挑戰。使用 CSS 的圓形圖案。我們將深入研究實作細節，並提出一個強大的 Jquery 解決方案，可以處理任意數量的外部專案。

理解旋轉機制

CSS 提供了轉換屬性，它允許我們對元素應用各種變換，包括旋轉。 rotateZ(angle) 函數繞 Z 軸旋轉元素，建立所需的圓週運動。

示範與實作

為了說明這個概念，我們將使用以下HTML 和CSS 程式碼：

<div class="outCircle">
  <div class="rotate">
    <div class="inner">hello</div>
  </div>
</div>

.outCircle {
  width: 200px;
  height: 200px;
  left: 270px;
  position: absolute;
  top: 50px;
  border-radius: 100px;
}
.rotate {
  width: 100%;
  height: 100%;
  -webkit-animation: circle 10s infinite linear;
}
.inner {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: red;
  display: block;
}
@-webkit-keyframes circle {
  from {
    -webkit-transform: rotateZ(0deg)
  }
  to {
    -webkit-transform: rotateZ(360deg)
  }
}

此程式碼成功將單一物件旋轉成圓圈。然而，擴展它來旋轉多個物件可能會很棘手。

動態旋轉的 Jquery 解

旋轉多個物件的關鍵是計算它們繞圓的位置並應用適當的轉換。下面的Jquery 解決方案可以優雅地處理這個問題：

var radius = 100;
var fields = $('.item'),
  container = $('#container'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

body {
  padding: 2em;
}
#container {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid #000;
  position: relative;
  border-radius: 50%;
  animation: spin 10s linear infinite;
}
.item {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: #f00;
  animation: spin 10s linear infinite reverse;
}
@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

解決方案的主要特點：

• 動態定位： Jquery腳本根據半徑和數量計算並更新所有物體的位置
• 任意數量的項目：它透過動態調整它們之間的角度間距來處理任意數量的外部項目。
• 精確對齊：此腳本確保所有項目在
• 自訂：可以輕鬆調整半徑和旋轉速度，以滿足不同的需求。

結論

雖然使用CSS 旋轉多個物件一開始可能會很困難，但本文中介紹的Jquery 解決方案提供了一種強大且通用的方法。它使開發人員只需幾行程式碼即可輕鬆創建引人注目的圓形動畫。

以上是如何使用 CSS 和 jQuery 有效地旋轉多個物件成一圈？的詳細內容。更多資訊請關注PHP中文網其他相關文章！