Kursvorschlag:

CSS rotateX() Funktion

Definition und Verwendung rotateX() CSS

rotateX() Die Funktion definiert die 3D-Drehung eines Elements um die x-Achse (horizontale Richtung). transform im Attribut verwendet.

Beispiel

Beispiel 1

Verwenden rotateX() Mehrere <div>-Elemente um die x-Achse (horizontale Richtung) drehen:

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

Selbst ausprobieren

Beispiel 2

Verwenden rotateX() Bilder um die x-Achse (horizontale Richtung) drehen:

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

Selbst ausprobieren

CSS-Syntax

rotateX(Winkel)

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Verwandte Seiten

Anleitung:CSS 3D Transformation

Referenz:CSS transform Eigenschaft

Referenz:CSS rotate Eigenschaft

Referenz:CSS rotate() Funktion

Referenz:CSS rotate3d() Funktion

Referenz:CSS rotateY() Funktion

Referenz:CSS rotateZ() Funktion