使用 CSS 旋轉(zhuǎn)多個對象在一個圓圈中：綜合指南

在本文中，我們探討了在一個圓圈中旋轉(zhuǎn)多個對象的挑戰(zhàn)。使用 CSS 的圓形圖案。我們將深入研究實現(xiàn)細節(jié)，并提出一個強大的 Jquery 解決方案，可以處理任意數(shù)量的外部項目。

理解旋轉(zhuǎn)機制

CSS 提供了轉(zhuǎn)換屬性，它允許我們對元素應用各種變換，包括旋轉(zhuǎn)。 rotateZ(angle) 函數(shù)繞 Z 軸旋轉(zhuǎn)元素，創(chuàng)建所需的圓周運動。

演示和實現(xiàn)

為了說明這個概念，我們將使用以下 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)
  }
}

此代碼成功將單個對象旋轉(zhuǎn)成圓圈。然而，擴展它來旋轉(zhuǎn)多個對象可能會很棘手。

動態(tài)旋轉(zhuǎn)的 Jquery 解決方案

旋轉(zhuǎn)多個對象的關鍵是計算它們繞圓的位置并應用適當?shù)霓D(zhuǎn)換。下面的 Jquery 解決方案可以優(yōu)雅地處理這個問題：

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

解決方案的主要特點：

• 動態(tài)定位： Jquery腳本根據(jù)半徑和數(shù)量計算并更新所有物體的位置
• 任意數(shù)量的項目：它通過動態(tài)調(diào)整它們之間的角度間距來處理任意數(shù)量的外部項目。
• 精確對齊：該腳本確保所有項目在
• 自定義：可以輕松調(diào)整半徑和旋轉(zhuǎn)速度，以滿足不同的需求。

結(jié)論

雖然使用 CSS 旋轉(zhuǎn)多個對象一開始可能會很困難，但本文中介紹的 Jquery 解決方案提供了一種強大且通用的方法。它使開發(fā)人員只需幾行代碼即可輕松創(chuàng)建引人注目的圓形動畫。

以上是如何使用 CSS 和 jQuery 有效地旋轉(zhuǎn)多個對象成一圈？的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！