CSS 3D-Transformation

CSS 3D-Transformation

CSS also supports 3D transformations.

Please hover the mouse over the following elements to view the difference between 2D and 3D transformations:

2D rotate
3D rotate

In diesem Kapitel werden Sie die folgenden CSS-Eigenschaften lernen:

  • transform

Browser-Unterstützung

Die Zahlen in der Tabelle kennzeichnen die erste Browserversion, die die Eigenschaft vollständig unterstützt.

Eigenschaft Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D-Transformationsmethode

durch CSS transform Eigenschaft, Sie können die folgenden 3D-Transformationsmethoden verwenden:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() Methode

Drehen Sie um die X-Achse

rotateX() Methode, um ein Element um einen bestimmten Winkel um die X-Achse zu drehen:

Beispiel

#myDiv {
  transform: rotateX(150deg);
}

Probieren Sie es selbst aus

rotateY() Methode

Drehen Sie um die Y-Achse

rotateY() Methode, um ein Element um einen bestimmten Winkel um die Y-Achse zu drehen:

Beispiel

#myDiv {
  transform: rotateY(130deg);
}

Probieren Sie es selbst aus

rotateZ() Methode

rotateZ() Methode, um ein Element um einen bestimmten Winkel um die Z-Achse zu drehen:

Beispiel

#myDiv {
  transform: rotateZ(90deg);
}

Probieren Sie es selbst aus

CSS-Transformationseigenschaft

Die nachstehende Tabelle listet alle 3D-Transformationseigenschaften auf:

Eigenschaft Beschreibung
transform Wendet eine 2D- oder 3D-Transformation auf ein Element an.
transform-origin Ermöglicht es, die Position eines transformierten Elements zu ändern.
transform-style Bestimmt, wie verschachtelte Elemente im 3D-Raum dargestellt werden.
perspective Bestimmt die Perspektiveffekte eines 3D-Elements.
perspective-origin Bestimmt die Position des Bodens eines 3D-Elements.
backface-visibility Definiert, ob ein Element sichtbar ist, wenn es sich nicht direkt auf den Bildschirm ausrichtet.

CSS 3D-Transformationsmethode

Funktion Beschreibung
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Definiert eine 3D-Transformation, indem eine 4x4-Matrix aus 16 Werten verwendet wird.
translate3d(x,y,z) Definiert eine 3D-Transformation.
translateX(x) Definiert eine 3D-Transformation, indem nur der Wert für die X-Achse verwendet wird.
translateY(y) Definiert eine 3D-Transformation, indem nur der Wert für die Y-Achse verwendet wird.
translateZ(z) Definiert eine 3D-Transformation, indem nur der Wert für die Z-Achse verwendet wird.
scale3d(x,y,z) Definiert eine 3D-Skalierungstransformation.
scaleX(x) Definiert einen 3D-Skalierungstransformation, durch Angabe eines Wertes für die X-Achse.
scaleY(y) Definiert einen 3D-Skalierungstransformation, durch Angabe eines Wertes für die Y-Achse.
scaleZ(z) Definiert einen 3D-Skalierungstransformation, durch Angabe eines Wertes für die Z-Achse.
rotate3d(x,y,z,Winkel) Definieren Sie die 3D-Drehung.
rotateX(Winkel) Definieren Sie die 3D-Drehung entlang der X-Achse.
rotateY(Winkel) Definieren Sie die 3D-Drehung entlang der Y-Achse.
rotateZ(Winkel) Definieren Sie die 3D-Drehung entlang der Z-Achse.
perspective(n) Definieren Sie den perspektivischen Blickwinkel von 3D-Transformationselementen.