Kann ich anklickbare Bilder mit CSS in einem Kreis anordnen?

Symbole in einem Kreis positionieren

Frage: Können mehrere Elemente in einem Kreis um andere positioniert werden und diese Elemente anklickbare Links sein?

Antwort:

Ja, das ist mit CSS möglich. Hier sind zwei Lösungen:

Moderne Lösung (2024)

1. Beginnen Sie mit einer Reihe von Bildern mit URLs und Alternativtext.
2. Generieren Sie HTML mit Pug oder einem anderen Methode zum Erstellen von Links zu den Bildern.
3. Legen Sie die Containergröße basierend auf der Anzahl der Bilder und dem Bild fest Größe.
4. Positionieren Sie die Bilder mithilfe von CSS-Transformationen auf einem Kreis.

Legacy-Lösung (aus historischen Gründen beibehalten)

1. Erstellen Sie einen Wrapper mit der Position: relativ; und legen Sie seinen Durchmesser fest.
2. Positionieren Sie die Links mit den Bildern in der Mitte des Wrappers mit position: absolute;.
3. Legen Sie die Winkel für jedes Bild fest und wenden Sie verkettete CSS-Transformationen an:

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

Hinweis: Die moderne Lösung ist flexibel und ermöglicht das Hinzufügen neuer Bilder, ohne das aktuelle zu verändern Struktur.

Das obige ist der detaillierte Inhalt vonKann ich anklickbare Bilder mit CSS in einem Kreis anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!