Comment disposer les images cliquables en cercle autour d'une image centrale ?

Positionner les icônes dans un cercle

Question :

Comment puis-je positionner plusieurs images dans un entourez une autre image, les rendant toutes cliquables liens ?

Réponse :

Solution 1 (moderne)

Utilisation de HTML, CSS et JavaScript :

1. Générez du HTML avec des liens d'image basés sur un tableau.
2. Utilisez CSS pour positionner les images sur un cercle dans un conteneur.
3. Ajustez la taille du conteneur en fonction du rayon du cercle et de la taille de l'image.

Solution 2 (ancienne)

Utilisation des transformations CSS :

1. Créez un div wrapper pour le cercle conteneur.
2. Positionnez les images absolument au centre du wrapper.
3. Appliquez des transformations CSS enchaînées pour faire pivoter et traduire les images aux angles souhaités.

Code Extrait :

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

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

.deg0 img {
  transform: rotate(0deg);
}

.deg45 img {
  transform: rotate(45deg);
}

.deg90 img {
  transform: rotate(90deg);
}

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!