Style transform-Attribut

Definition und Verwendung

transform Der Attribut wendet 2D- oder 3D-Transformationen auf das Element an. Dieses Attribut ermöglicht es Ihnen, das Element zu drehen, zu skalieren, zu bewegen, zu neigen usw.

Weitere Informationen:

CSS-Referenzhandbuch:transform-Eigenschaft

Beispiel

Drehen Sie das div-Element:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Versuchen Sie es selbst

Syntax

Rufen Sie die transform-Eigenschaft ab:

object.style.transform

Setzen Sie die transform-Eigenschaft:

object.style.transform = "none|transform-functions|initial|inherit"

Eigenschaftswert

Wert Beschreibung
none Definieren Sie keine Transformation.
matrix(n, n, n, n, n, n) Definieren Sie die 2D-Transformation, indem Sie eine Matrix mit sechs Werten verwenden.
matrix3d(n, n, n, n, etc....) Verwenden Sie eine 4x4-Matrix mit 16 Werten, um die 3D-Transformation zu definieren.
translate(x, y) Definieren Sie die 2D-Translation.
translate3d(x, y, z) Definieren Sie die 3D-Translation.
translateX(x) Definieren Sie die Translation, indem Sie nur den Wert der X-Achse verwenden.
translateY(y) Definieren Sie die Translation, indem Sie nur den Wert der Y-Achse verwenden.
translateZ(z) Definieren Sie die 3D-Translation, indem Sie nur den Wert der Z-Achse verwenden.
scale(x, y) Definieren Sie die 2D-Skalierung.
scale3d(x, y, z) Definieren Sie die 3D-Skalierung.
scaleX(x) Definieren Sie die Skalierung, indem Sie einen Wert für die X-Achse angeben.
scaleY(y) Definieren Sie die Skalierung, indem Sie einen Wert für die Y-Achse angeben.
scaleZ(z) Definieren Sie die 3D-Skalierung, indem Sie einen Wert für die Z-Achse angeben.
rotate(Winkel) Definieren Sie die 2D-Drehung, indem Sie den Winkel angeben.
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.
skew(x-Winkel, y-Winkel) Definieren Sie die 2D-Schräglage entlang der X- und Y-Achse.
skewX(Winkel) Definieren Sie die 2D-Schräglage entlang der X-Achse.
skewY(Winkel) Definieren Sie die 2D-Schräglage entlang der Y-Achse.
perspective(n) Definieren Sie den Bildausschnitt für 3D-Transformationselemente.
initial Setzen Sie diesen Wert auf seinen Standardwert. Siehe initial.
inherit Erben Sie diesen Wert von ihrem Elternelement. Siehe inherit.

Technische Details

Standardwert: Keine
Rückgabewert: Zeichenkette, die den transform-Eigenschaft.
CSS-Version: CSS3

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0