Wie drehe ich mehrere Objekte mithilfe von CSS und JavaScript um einen Kreis?

Mehrere Objekte mit CSS um einen Kreis drehen

Bei dem Versuch, eine Animation zu erstellen, bei der sich mehrere Objekte um einen Kreis drehen, ist Folgendes aufgetreten Nur ein Objekt dreht sich richtig. Dieser Artikel soll Anleitungen zur Lösung dieses Problems geben, um sicherzustellen, dass sich alle gewünschten Objekte nahtlos um den Kreis drehen.

Vorhandener Code und Implementierung

Der bereitgestellte Code beinhaltet einen „outCircle“. "-Div, das als Rotationszentrum fungiert und in dem ein verschachteltes „Rotate“-Div die zu animierenden Objekte enthält. Mithilfe der CSS3-Animation wird das Div „rotate“ so konfiguriert, dass es sich unbegrenzt um den „outCircle“ dreht. Versuche, zusätzliche Objekte innerhalb des „rotate“-Divs hinzuzufügen, führen jedoch zu unerwünschtem Verhalten.

Lösung

Um dieses Problem zu beheben, ist ein JavaScript-basierter Ansatz besser geeignet zur Handhabung mehrerer Objektrotationen:

var radius = 100; // Adjust to place items closer or farther from the center
var fields = $('.item'); // Target the objects to be rotated
var container = $('#container'); // Parent div encasing the rotating objects
var width = container.width();
var height = container.height();
var angle = 0;
var step = (2 * Math.PI) / fields.length; // Calculate the angular separation between objects

fields.each(function() {
  // Calculate the coordinates for each object based on its position in the circle
  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 (console) {
    console.log($(this).text(), x, y); // Display coordinates for debugging
  }

  $(this).css({
    left: x + 'px', // Set the left position
    top: y + 'px', // Set the top position
  });

  // Increment the angle based on the spacing between objects
  angle += step;
});

Zusätzlich Überlegungen

Zusätzlich kann CSS3 verwendet werden, um das Animationsverhalten zu konfigurieren:

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; //  Define the animation duration and direction
}

.item {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: #f00;
  animation: spin 10s linear infinite reverse; //  Reverse the animation for each object
}

@keyframes spin {
  100% {
    transform: rotate(1turn); //  Rotate the objects one full turn
  }
}

Beispiel

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

Dieser Ansatz bietet eine flexible und skalierbare Lösung zum Drehen einer beliebigen Anzahl von Objekten um einen Kreis mithilfe von CSS3 und JavaScript.

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