Wie ordne ich anklickbare Bilder kreisförmig um ein mittleres Bild an?

Symbole im Kreis positionieren

Frage:

Wie kann ich mehrere Bilder in einem Kreis positionieren? Kreisen Sie ein anderes Bild ein, sodass alle anklickbar sind Links?

Antwort:

Lösung 1 (Modern)

Verwendung von HTML, CSS und JavaScript:

1. HTML mit Bildlinks basierend auf einem Array generieren.
2. Verwenden CSS, um Bilder auf einem Kreis innerhalb eines Containers zu positionieren.
3. Containergröße basierend auf Kreisradius und Bildgröße anpassen.

Lösung 2 (Alt)

Verwenden von CSS-Transformationen:

1. Erstellen Sie ein Wrapper-Div für den Kreis Container.
2. Positionieren Sie Bilder absolut in der Mitte des Wrappers.
3. Wenden Sie verkettete CSS-Transformationen an, um Bilder in die gewünschten Winkel zu drehen und zu verschieben.

Code Snippet:

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

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