transform

Die Eigenschaft transform erlaubt es Ihnen, ein Element visuell zu manipulieren, indem Sie es verzerren, drehen, verschieben oder skalieren.

.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
}

Selbst mit einer deklarierten Höhe und Breite wird dieses Element nun auf das Zwanzigfache seiner ursprünglichen Größe skaliert.

Wenn dieser Funktion zwei Werte übergeben werden, wird sie horizontal um den ersten Wert und vertikal um den zweiten Wert gestreckt. Im folgenden Beispiel wird das Element nun doppelt so breit, aber halb so hoch wie das ursprüngliche Element sein.

.element {
  transform: scale(2, .5);
}

Oder Sie können spezifischer sein, ohne die Kurzschreibweise zu verwenden.

transform: scaleX(2);
transform: scaleY(.5);

Aber scale() ist nur eine von vielen verfügbaren Transformationsfunktionen.

Werte

• scale(): Beeinflusst die Größe des Elements. Dies gilt auch für die font-size, padding, height und width eines Elements. Es ist auch eine Kurzschreibweise für die Funktionen scaleX und scaleY.
• skewX() und skewY(): Neigt ein Element nach links oder rechts, ähnlich wie ein Rechteck zu einem Parallelogramm wird. skew() ist eine Kurzschreibweise, die skewX() und skewY kombiniert, indem sie beide Werte akzeptiert.
• translate(): Verschiebt ein Element seitlich oder nach oben und unten.
• rotate(): Dreht das Element im Uhrzeigersinn von seiner aktuellen Position aus.
• matrix(): Eine Funktion, die wahrscheinlich nicht von Hand geschrieben werden soll, aber alle Transformationen in einer kombiniert.
• perspective(): Beeinflusst das Element selbst nicht, sondern die 3D-Transformationen von absteigenden Elementen, wodurch sie alle eine konsistente Tiefenperspektive erhalten.

• Verzerrung
• Drehung
• Verschiebung
• Mehrere Werte
• Matrix
• 3D-Transformationen

Verzerrung

/* Skew points along the x-axis */
.element {
  transform: skewX(25deg);
}

/* Skew point along the y-axis */
.element {
  transform: skewY(25deg);
}

/* Skew points along the x- and y-axis */
.element {
  transform: skew(25deg, 25deg);
}

Die Transformationsfunktionen skewX und skewY neigen ein Element in die eine oder andere Richtung. Denken Sie daran: Es gibt keine Kurzschreibweise für die Verzerrung eines Elements, daher müssen Sie beide Funktionen verwenden. Im folgenden Beispiel können wir ein 100px x 100px großes Quadrat mit skewX nach links und rechts verzerren.

Während wir in diesem Beispiel ein Element vertikal mit skewY verzerren können.

Nun verwenden wir skew(), um die beiden zu kombinieren.

Drehung

.element {
  transform: rotate(25deg);
}

Dies dreht ein Element im Uhrzeigersinn von seiner ursprünglichen Position, während ein negativer Wert es in die entgegengesetzte Richtung drehen würde. Hier ist ein einfaches animiertes Beispiel, bei dem sich ein Quadrat alle drei Sekunden um 360 Grad dreht.

Wir können auch die Funktionen rotateX, rotateY und rotateZ verwenden, wie hier gezeigt.

Verschiebung

.element {
  transform: translate(20px, 10px);
}

Diese Transformationsfunktion verschiebt ein Element seitlich oder nach oben und unten. Warum nicht einfach top/left/bottom/right verwenden? Nun, es ist manchmal etwas verwirrend. Ich würde diese für Layout/Positionierung (sie haben sowieso eine bessere Browserunterstützung) betrachten und diese als Möglichkeit, diese Dinge als Teil eines Übergangs oder einer Animation zu bewegen.

Diese Werte wären beliebige Längenwerte, wie 10px oder 2,4em. Ein Wert verschiebt das Element nach rechts (negative Werte nach links). Wenn ein zweiter Wert angegeben wird, verschiebt dieser Wert es nach unten (negative Werte nach oben). Oder Sie können spezifisch werden.

transform: translateX(value);
transform: translateY(value);

Es ist wichtig zu beachten, dass ein Element, das transform verwendet, nicht dazu führt, dass andere Elemente um es herumfließen. Indem wir die unten gezeigte translate-Funktion verwenden und das grüne Quadrat aus seiner ursprünglichen Position verschieben, werden wir feststellen, dass der umgebende Text an Ort und Stelle bleibt, als ob das Quadrat ein Blockelement wäre.

Es ist auch erwähnenswert, dass translate hardwarebeschleunigt wird, wenn Sie diese Eigenschaft animieren möchten, im Gegensatz zu position: absolute.

Mehrere Werte

Mit einer durch Leerzeichen getrennten Liste können Sie der Eigenschaft transform mehrere Werte hinzufügen.

.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}

Es ist erwähnenswert, dass es eine Reihenfolge gibt, in der diese Transformationen durchgeführt werden. Im obigen Beispiel wird die Verzerrung zuerst ausgeführt und dann das Element skaliert.

Matrix

Die Transformationsfunktion matrix kann verwendet werden, um alle Transformationen in einer zu kombinieren. Es ist eine Art Kurzschreibweise für Transformationen, nur glaube ich nicht, dass sie wirklich von Hand geschrieben werden soll. Es gibt Werkzeuge wie The Matrix Resolutions, die eine Gruppe von Transformationen in eine einzige Matrixdeklaration umwandeln können. Möglicherweise kann dies in einigen Situationen die Dateigröße reduzieren, obwohl für Sie unübersichtliche Mikrooptimierungen wie diese wahrscheinlich keine Zeit wert sind.

Für Neugierige, dies

rotate(45deg) translate(24px, 25px)

…kann auch dargestellt werden als

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D-Transformationen

Die meisten der oben genannten Eigenschaften haben 3D-Versionen davon.

translate3d(x, y, z)
translateZ(z)

Der dritte Wert in translate3d oder der Wert in translateZ bewegt das Element zum Betrachter hin, negative Werte weg.

scale3d(sx, sy, sz)
scaleZ(sz)

Der dritte Wert in scale3d oder der Wert in scaleZ beeinflusst die Skalierung entlang der z-Achse (z. B. der imaginären Linie, die direkt aus dem Bildschirm kommt).

rotateX(value)
rotateY(value)
rotate3d(x, y, z)

rotateX und rotateY drehen ein Element im 3D-Raum um diese Achsen. rotate3d erlaubt es Ihnen, einen Punkt im 3D-Raum anzugeben, um den das Element gedreht werden soll.

matrix3d(…)

Eine Möglichkeit, eine 3D-Transformation programmatisch in einem 4x4-Raster zu beschreiben. Niemand wird jemals eine von diesen von Hand schreiben.

perspective(value)

Dieser Wert beeinflusst das Element selbst nicht, aber er beeinflusst die 3D-Transformationen von absteigenden Elementen, wodurch sie alle eine konsistente Tiefenperspektive erhalten.

Weitere Informationen

• MDN Docs zu transform und Verwendung.
• David DeSandro's Dokumentation zu 3D-Transformationen
• Surfin’ Safari: 3D-Transformationen
• W3C-Spezifikation zu CSS3-Transformationen
• Einführung in CSS 3D-Transformationen
• Tricks zur Verwendung von CSS translateZ() und perspective() (DigitalOcean)

Verwandte Eigenschaften

Zufällige Tatsache: Eine Transformation erzeugt einen Positionierungskontext genau wie position: relative;
tut.

Browser-Unterstützung

Unterstützung für 2D-Transformationen

Unterstützung für 3D-Transformationen