Comment disposer les icônes en cercle à l'aide de CSS et JavaScript ?

Positionner les icônes dans un cercle avec CSS et JavaScript

Vue d'ensemble

Obtenir l'effet souhaité en plaçant plusieurs images dans un cercle nécessite à la fois CSS et JavaScript.

CSS pour le positionnement

Pour positionner les images dans un cercle, les transformations CSS sont nécessaire. Chaque image doit être placée au centre de l'élément conteneur, puis traduite le long de l'axe X de la moitié de la largeur du conteneur. Le code suivant démontre le CSS requis :

.container {
  width: 24em;
  height: 24em;
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript pour la distribution

Alors que CSS positionne les images, JavaScript est utilisé pour les répartir uniformément autour du cercle. Cela implique de calculer l'angle entre chaque image et de la faire pivoter en conséquence. Le code suivant le démontre :

const container = document.querySelector('.container');
const icons = document.querySelectorAll('.icon');

const containerWidth = container.getBoundingClientRect().width;
const containerHeight = container.getBoundingClientRect().height;
const iconWidth = icons[0].getBoundingClientRect().width;
const iconHeight = icons[0].getBoundingClientRect().height;

icons.forEach((icon, index) => {
  const angle = (Math.PI * 2) / icons.length;
  const transformString = `rotate(${angle * index}rad) translate(${containerWidth / 2 - iconWidth / 2}px, ${containerHeight / 2 - iconHeight / 2}px)`;
  icon.style.transform = transformString;
});

Conclusion

En combinant le CSS pour le positionnement et le JavaScript pour la distribution, vous pouvez efficacement placer plusieurs images dans un cercle et conserver leur fonctionnalité cliquable.

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!