使用CSS 旋轉(zhuǎn)多個(gè)物件在一個(gè)圓圈中：綜合指南

在本文中，我們探討了在一個(gè)圓圈中旋轉(zhuǎn)多個(gè)對(duì)象的挑戰(zhàn)。使用 CSS 的圓形圖案。我們將深入研究實(shí)作細(xì)節(jié)，並提出一個(gè)強(qiáng)大的 Jquery 解決方案，可以處理任意數(shù)量的外部專案。

理解旋轉(zhuǎn)機(jī)制

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

示範(fàn)與實(shí)作

為了說明這個(gè)概念，我們將使用以下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)成圓圈。然而，擴(kuò)展它來旋轉(zhuǎn)多個(gè)物件可能會(huì)很棘手。

動(dòng)態(tài)旋轉(zhuǎn)的 Jquery 解

旋轉(zhuǎn)多個(gè)物件的關(guān)鍵是計(jì)算它們繞圓的位置並應(yīng)用適當(dāng)?shù)霓D(zhuǎn)換。下面的Jquery 解決方案可以優(yōu)雅地處理這個(gè)問題：

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

解決方案的主要特點(diǎn)：

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

結(jié)論

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

以上是如何使用 CSS 和 jQuery 有效地旋轉(zhuǎn)多個(gè)物件成一圈？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！