Comment faire pivoter plusieurs objets autour d'un cercle à l'aide de CSS et JavaScript ?

Rotation de plusieurs objets autour d'un cercle à l'aide de CSS

Dans une tentative de créer une animation dans laquelle plusieurs objets tournent autour d'un cercle, nous avons constaté que un seul objet tourne correctement. Cet article vise à fournir des conseils pour résoudre ce problème afin de garantir que tous les objets souhaités tournent de manière transparente autour du cercle.

Code existant et mise en œuvre

Le code fourni implique un "outCircle " div qui fait office de centre de rotation, et en son sein, un div "rotation" imbriqué contient les objets à animer. À l'aide de l'animation CSS3, le div « rotation » est configuré pour tourner indéfiniment autour du « outCircle ». Cependant, les tentatives d'ajout d'objets supplémentaires dans le div « rotation » entraînent un comportement indésirable.

Solution

Pour résoudre ce problème, une approche basée sur JavaScript est plus adaptée. pour gérer la rotation de plusieurs objets :

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

Supplémentaire Considérations

De plus, CSS3 peut être utilisé pour configurer le comportement de l'animation :

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

Exemple

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

Cette approche fournit une solution flexible et évolutive pour faire pivoter n'importe quel nombre d'objets autour d'un cercle à l'aide de CSS3 et JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!