Wie ordne ich anklickbare Bilder kreisförmig an?

Symbole in einem Kreis positionieren

Frage:
Wie kann ich mehrere Bilder in einem Kreis ausrichten und gleichzeitig ihre Anklickbarkeit beibehalten? Funktionalität?

Antwort:

Lösung 2024:

Diese Lösung bietet einen moderneren Ansatz:

1. Verwenden Sie ein Array von Bildobjekten.
2. Generieren Sie HTML basierend auf dem Array mit eine Vorlagensprache (z. B. Pug).
3. Definieren Sie in CSS einen Container mit einem Radius, der basierend auf der Anzahl der Bilder und der Kantengröße berechnet wird.
4. Positionieren Sie Bilder mithilfe von Transformationen und Abständen auf dem Kreis sie gleichermaßen.

Original Lösung:

1. Erstellen Sie einen Wrapper mit definiertem Durchmesser und positionieren Sie ihn relativ zur Mitte.

2. Positionieren Sie jedes Bild innerhalb des Wrappers:

   • Stellen Sie die Position auf „absolut“ ein und zentrieren Sie sie sowohl horizontal als auch vertikal.
   • Verwenden Sie einen negativen Rand, um das Bild anzupassen Größe.

3. Definieren Sie Klassen mit gewünschten Rotationswinkeln und wenden Sie Transformationsketten an:

   • Rotieren transformiert das Objekt und seine Achsen.
   • Übersetzen verschiebt das Objekt entlang der gedrehten X-Achse.
   • Erneut drehen dreht das Objekt zurück in sein Original Position.

HTML- und CSS-Code-Snippet:

<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); }

Das obige ist der detaillierte Inhalt vonWie ordne ich anklickbare Bilder kreisförmig an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!