tas2580
Blog über Webentwicklung

CSS - transform

Die transform Eigenschaft legt eine 2D- oder 3D-Transformation auf ein Element.

Beispiel

div {
    transform: rotate(7deg);
}

Definition und Verwendung

Standard Wert:
none
CSS Version:
CSS3
Vererbt sich:
Nein
Animierbar:
Ja
-webkit-:
-webkit-transform
-moz-:
-moz-transform
-o-:
-o-transform
-ms-:
-ms-transform

Browser Unterstützung

Chrome Nein
Firefox Nein
Safari Nein
Opera Nein
Edge Nein
IE Nein

Mögliche Werte

Der Eigenschaft können die hier aufgelisteten Werte zugewiesen werden.

Wert Beschreibung
matrix(Zahl, Zahl, Zahl, Zahl, Zahl, Zahl) Definiert eine 2D-Transformation, mit einer Matrix aus sechs Werten.
matrix3d (Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl, Zahl) Definiert eine 3D-Transformation, mit einer 4x4-Matrix aus 16 Werten.
none Legt fest, dass keine Transformation erfolgen soll.
perspective(Zahl) Definiert eine perspektivische Ansicht für ein 3D-transformiertes Element.
rotate(deg) Definiert eine 2D-Drehung mit dem Winkel der in dem Parameter angegebenen wird.
rotate3d(x, y, z, deg) Definiert eine 3D-Rotation.
rotateX(deg) Definiert eine 3D-Rotation entlang der X-Achse.
rotateY(deg) Definiert eine 3D-Rotation entlang der Y-Achse.
rotateZ(deg) Definiert eine 3D-Rotation entlang der Z-Achse.
scale(x, y) Definiert eine 2D-Skalierungs Transformation.
scale3d(x, y, z) Definiert eine 3D-Skalierungs Transformation.
scaleX(x) Definiert eine Skalierungstransformation durch einen Wert für die X-Achse.
scaleY(y) Definiert eine Skalierungstransformation durch einen Wert für die Y-Achse.
scaleZ(z) Definiert eine Skalierungstransformation durch einen Wert für die Z-Achse.
skew(deg, deg) Definiert eine 2D skew Transformation entlang der X- und der Y-Achse.
skewX(deg) Definiert eine 2D skew Transformation entlang der X-Achse.
skewY(deg) Definiert eine 2D skew Transformation entlang der Y-Achse.
translate(x, y) Definiert eine 2D-Transformation.
translate3d(x, y, z) Definiert eine 3D-Transformation.
translateX(x) Definiert eine Transformation, nur mit dem Wert für die X-Achse.
translateY(y) Definiert eine Transformation, nur mit dem Wert für die Y-Achse.
translateZ(z) Definiert eine Transformation, nur mit dem Wert für die Z-Achse.
initial Setzt diese Eigenschaft auf den Standardwert.
inherit Erbt diese Eigenschaft von seinem übergeordneten Element.