Comment organiser des images cliquables dans une formation circulaire ?

Positionner les icônes dans un cercle

Question :
Comment puis-je aligner plusieurs images dans un cercle tout en conservant leur caractère cliquable fonctionnalité ?

Réponse :

Solution 2024 :

Cette solution offre une approche plus moderne :

1. Utilisez un tableau d'objets image.
2. Générez du HTML basé sur le tableau à l'aide d'un langage de création de modèles (par exemple, Pug).
3. En CSS, définissez un conteneur avec un rayon calculé en fonction du nombre d'images et de la taille des bords.
4. Positionnez les images sur le cercle à l'aide de transformations, en les espaçant également.

Original Solution :

1. Créez un emballage avec un diamètre défini et positionnez-le par rapport au centre.

2. Positionnez chaque image dans l'emballage :

   • Définissez la position sur absolue et centrez-la horizontalement et verticalement.
   • Utilisez une marge négative pour ajuster l'image. size.

3. Définissez les classes avec les angles de rotation souhaités et appliquez des chaînes de transformation :

   • rotate transforme l'objet et ses axes.
   • traduire déplace l'objet le long de l'axe X pivoté.
   • faire pivoter à nouveau fait pivoter l'objet vers son original position.

Extrait de code HTML et CSS :

<div class="circle-container">
    <a href="#" class="center"></a>
    <a href="#" class="deg0"></a>
    <a href="#" class="deg45"></a>
    <a href="#" class="deg135"></a>
    <a href="#" class="deg180"></a>
    <a href="#" class="deg225"></a>
    <a href="#" class="deg315"></a>
</div>

.circle-container {
    width: 24em;
    height: 24em;
    position: relative;
}
.circle-container a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
}
.deg0 { transform: translate(12em); }
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }

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!