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

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

Bien que la rotation d'un seul objet autour d'un cercle puisse être réalisée avec CSS, le défi se pose lorsque vous souhaitez faire pivoter plusieurs objets simultanément. Voici une solution détaillée qui vous guidera tout au long de ce processus :

La solution utilise jQuery, qui est une puissante bibliothèque JavaScript qui simplifie la manipulation et l'animation du DOM. Il vous permet de faire pivoter plusieurs objets autour d'un cercle quel que soit leur nombre.

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

Ce code jQuery calcule la position de chaque objet en fonction du rayon du cercle et du nombre d'objets. Il définit les positions gauche et supérieure de chaque objet pour l'aligner autour du périmètre du cercle.

Pour compléter l'animation, vous pouvez ajouter les règles CSS suivantes :

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

Ces règles créez un conteneur avec une bordure circulaire et chaque objet tourne autour du conteneur dans des directions opposées. En ajustant la variable de rayon, vous pouvez contrôler la distance des objets par rapport au centre du cercle.

En combinant jQuery et CSS, vous pouvez facilement faire pivoter plusieurs objets autour d'un cercle en utilisant CSS et obtenir l'effet d'animation souhaité. .

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!