Wie drehe ich mehrere Objekte mit CSS und jQuery um einen Kreis?

Mehrere Objekte mit CSS um einen Kreis drehen

Während das Drehen eines einzelnen Objekts um einen Kreis mit CSS möglich ist, entsteht die Herausforderung, wenn Sie mehrere Objekte drehen möchten gleichzeitig. Hier ist eine detaillierte Lösung, die Sie durch diesen Prozess führt:

Die Lösung nutzt jQuery, eine leistungsstarke JavaScript-Bibliothek, die die DOM-Manipulation und -Animation vereinfacht. Es ermöglicht Ihnen, mehrere Objekte unabhängig von ihrer Anzahl um einen Kreis zu drehen.

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

Dieser jQuery-Code berechnet die Position jedes Objekts basierend auf dem Radius des Kreises und der Anzahl der Objekte. Es legt die linke und obere Position jedes Objekts fest, um es am Umfang des Kreises auszurichten.

Um die Animation zu vervollständigen, können Sie die folgenden CSS-Regeln hinzufügen:

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

Diese Regeln Erstellen Sie einen Container mit einem kreisförmigen Rand, und jedes Objekt dreht sich in entgegengesetzte Richtungen um den Container. Durch Anpassen der Radiusvariablen können Sie den Abstand der Objekte vom Mittelpunkt des Kreises steuern.

Durch die Kombination von jQuery und CSS können Sie mithilfe von CSS problemlos mehrere Objekte um einen Kreis drehen und den gewünschten Animationseffekt erzielen .

Das obige ist der detaillierte Inhalt vonWie drehe ich mehrere Objekte mit CSS und jQuery um einen Kreis?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!