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. |