Comment puis-je faire pivoter efficacement plusieurs objets dans un cercle en utilisant CSS et jQuery ?

Rotation de plusieurs objets dans un cercle à l'aide de CSS : un guide complet

Dans cet article, nous explorons les défis liés à la rotation de plusieurs objets dans un motif circulaire en utilisant CSS. Nous approfondirons les détails de mise en œuvre et présenterons une solution Jquery robuste capable de gérer n'importe quel nombre d'éléments externes.

Comprendre le mécanisme de rotation

CSS fournit la propriété de transformation, ce qui nous permet d'appliquer diverses transformations aux éléments, y compris la rotation. La fonction rotateZ(angle) fait pivoter l'élément autour de l'axe Z, créant le mouvement circulaire souhaité.

Démo et implémentation

Pour illustrer le concept, nous utiliserons le code HTML et CSS suivant :

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

Ce code fait tourner avec succès un seul objet dans un cercle. Cependant, l'étendre pour faire pivoter plusieurs objets peut être délicat.

Solution Jquery pour la rotation dynamique

La clé pour faire pivoter plusieurs objets est de calculer leurs positions autour du cercle et appliquer les transformations appropriées. La solution Jquery suivante gère ce problème avec élégance :

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

Principales caractéristiques de la solution :

• Positionnement dynamique : Le script Jquery calcule et met à jour les positions de tous les objets en fonction du rayon et du nombre de articles.
• Nombre arbitraire d'articles : Il gère n'importe quel nombre d'éléments extérieurs en ajustant dynamiquement l'espacement angulaire entre eux.
• Alignement précis : Le script garantit que tous les éléments sont parfaitement alignés sur un cercle.
• Personnalisation :Le le rayon et la vitesse de rotation peuvent être facilement ajustés pour répondre à différentes exigences.

Conclusion

Bien que la rotation de plusieurs objets dans un cercle à l'aide de CSS puisse être difficile au début, la solution Jquery présentée dans cet article propose une approche robuste et polyvalente. Il permet aux développeurs de créer sans effort des animations circulaires accrocheuses avec seulement quelques lignes de code.

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!