Puis-je organiser des images cliquables dans un cercle à l'aide de CSS ?

Positionner les icônes dans un cercle

Question : Plusieurs les éléments doivent-ils être positionnés dans un cercle autour d'un autre et ces éléments doivent-ils être des liens cliquables ?

Réponse :

Oui, cela est possible en utilisant CSS. Voici deux solutions :

Solution moderne (2024)

1. Commencez avec un tableau d'images avec des URL et du texte alternatif.
2. Générez du HTML à l'aide de Pug ou de tout autre méthode pour créer des liens avec les images.
3. Définissez la taille du conteneur en fonction du nombre d'images et de l'image size.
4. Positionnez les images sur un cercle à l'aide de transformations CSS.

Solution héritée (conservée pour des raisons historiques)

1. Créez un wrapper avec position : relatif; et définissez son diamètre.
2. Positionnez les liens avec les images au centre du wrapper en utilisant position: absolue;.
3. Définissez les angles pour chaque image et appliquez des transformations CSS chaînées :

.deg{desired_angle} {
   transform: rotate({desired_angle}) translate(12em) rotate(-{desired_angle});
}

Remarque : La solution moderne est flexible et permet d'ajouter de nouvelles images sans altérer l'actuelle. structure.

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!