Kursvorschlag:

CSS rotateZ() Funktion

Definition und Verwendung rotateZ() CSS

rotateZ() Die Funktion definiert eine 3D-Drehung eines Elements um die z-Achse. transform im Attribut verwendet.

Hinweis:rotateZ(angle) Äquivalent zu rotate(angle).

Beispiel

Beispiel 1

Verwende rotateZ() Mehrere <div>-Elemente um die z-Achse drehen:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Versuche es selbst

Beispiel 2

Verwende rotateZ() Bilde um die z-Achse drehen:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Versuche es selbst

CSS Syntax

rotateZ(angle)
Wert Beschreibung
angle

Erforderlich. Bestimme den Drehwinkel. Mögliche Einheiten:

  • deg（Grad）
  • rad（Bogenmaß）
  • turn（Umdrehung）

Technische Details

Version: CSS Transforms Modul Level 2

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die diese Funktion vollständig unterstützt.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Verwandte Seiten

Anleitung:CSS 3D Transformation

Referenz:CSS transform Eigenschaft

Referenz:CSS rotate Eigenschaft

Referenz:CSS rotate() Funktion

Referenz:CSS rotate3d() Funktion

Referenz:CSS rotateX() Funktion

Referenz:CSS rotateY() Funktion