如何使用 CSS 和 jQuery 繞圓旋轉多個物件？

使用CSS 繞圓旋轉多個對象

雖然可以使用CSS 實現繞圓旋轉單個對象，但當您想要旋轉多個對象時就會出現挑戰同時地。以下是一個詳細的解決方案，將引導您完成此過程：

該解決方案利用 jQuery，這是一個功能強大的 JavaScript 庫，可以簡化 DOM 操作和動畫。它允許您圍繞圓旋轉多個對象，無論其數量如何。

var radius = 100; // adjust to move out items in and out 
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);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

此 jQuery 程式碼根據圓的半徑和物件的數量計算每個物件的位置。它設定每個物件的左側和頂部位置，使其圍繞圓的周邊對齊。

要完成動畫，您可以添加以下 CSS 規則：

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);
  }
}

這些規則會建立一個帶有圓形邊框的容器，每個物件圍繞容器以相反的方向旋轉。透過調整radius變量，可以控制物體距離圓心的距離。

透過結合jQuery和CSS，您可以使用CSS輕鬆地圍繞一個圓旋轉多個物體，並達到想要的動畫效果.

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