Transformieren - CSS-Tricks

Anonim

Mit dieser transformEigenschaft können Sie ein Element visuell bearbeiten, indem Sie es verzerren, drehen, übersetzen oder skalieren:

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

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

Siehe die Erklärung zur Stifttransformation durch CSS-Tricks (@ css-Tricks) auf CodePen.

Wenn Sie dieser Funktion zwei Werte geben, wird sie horizontal um den ersten und vertikal um den zweiten gedehnt. Im folgenden Beispiel ist das Element jetzt doppelt so breit, aber halb so hoch wie das ursprüngliche Element:

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

Oder Sie können genauer sein, ohne die Kurzfunktion zu verwenden:

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

Dies scale()ist jedoch nur eine von vielen verfügbaren Transformationsfunktionen:

Werte

  • scale(): Beeinflusst die Größe des Elements. Dies gilt auch für das font-size, padding, heightund widthein Element auch. Es ist auch eine Kurzfunktion für die scaleXund scaleYFunktionen.
  • skewX()und skewY(): Kippt ein Element nach links oder rechts, wie das Verwandeln eines Rechtecks ​​in ein Parallelogramm. skew()ist eine Abkürzung, die beide Werte kombiniert skewX()und skewYakzeptiert.
  • translate(): Bewegt ein Element seitwärts oder auf und ab.
  • rotate(): Dreht das Element von seiner aktuellen Position im Uhrzeigersinn.
  • matrix(): Eine Funktion, die wahrscheinlich nicht von Hand geschrieben werden soll, sondern alle Transformationen zu einer kombiniert.
  • perspective(): Betrifft nicht das Element selbst, sondern die Transformationen der 3D-Transformationen absteigender Elemente, sodass alle eine konsistente Tiefenperspektive haben.

Schräg

/* 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 Funktionen skewXund skewYtransform kippen ein Element in die eine oder andere Richtung. Denken Sie daran: Es gibt keine Abkürzungseigenschaft zum Versetzen eines Elements, daher müssen Sie beide Funktionen verwenden. Im folgenden Beispiel können wir ein Quadrat von 100 x 100 Pixel nach links und rechts verschieben mit skewX:

Siehe die Erklärung zur Stifttransformation durch CSS-Tricks (@ css-Tricks) auf CodePen.

In diesem Beispiel können wir ein Element vertikal mit verzerren skewY:

Siehe die Erklärung zur Stifttransformation durch CSS-Tricks (@ css-Tricks) auf CodePen.

Lassen Sie uns skew()nun die beiden kombinieren:

Siehe die
Shorthand-Eigenschaft Pen skew () von CSS-Tricks (@ css-
trick ) auf CodePen.

Drehen

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

Siehe die Erklärung zur Stifttransformation durch CSS-Tricks (@ css-Tricks) auf CodePen.

Wir können auch die Verwendung rotateX, rotateYund rotateZFunktionen, etwa so:

Siehe die Erklärung zur Stifttransformation durch CSS-Tricks (@ css-Tricks) auf CodePen.

Übersetzen

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

Diese Transformationsfunktion bewegt ein Element seitwärts oder auf und ab. Warum nicht einfach oben / links / unten / rechts verwenden? Nun, es ist manchmal ein bisschen verwirrend. Ich würde diese als Layout / Positionierung betrachten (sie haben sowieso eine bessere Browserunterstützung) und dies als eine Möglichkeit, diese Dinge als Teil eines Übergangs oder einer Animation zu bewegen.

Diese Werte sind 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 zweite Wert ihn 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, transformdas verwendet, nicht dazu führt, dass andere Elemente um es herum fließen. Wenn Sie die folgende translateFunktion verwenden und das grüne Quadrat aus seiner ursprünglichen Position verschieben, werden wir feststellen, wie der umgebende Text an Ort und Stelle bleibt, als wäre das Quadrat ein Blockelement:

Siehe die Erklärung zur Stifttransformation durch CSS-Tricks (@ css-Tricks) auf CodePen.

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

Mehrere Werte

Mit einer durch Leerzeichen getrennten Liste können Sie der transformEigenschaft 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 ausgeführt werden. Im obigen Beispiel wird zuerst "Skew" ausgeführt und dann das Element skaliert.

Matrix

Mit der matrixTransformationsfunktion können alle Transformationen zu einer kombiniert werden. Es ist ein bisschen wie eine Kurzform der Transformation, nur glaube ich nicht, dass es wirklich von Hand geschrieben werden soll. Es gibt Tools wie The Matrix Resolutions, mit denen eine Gruppe von Transformationen in eine einzelne Matrixdeklaration konvertiert werden kann. In einigen Situationen kann dies möglicherweise die Dateigröße verringern, obwohl solche autorenunfreundlichen Mikrooptimierungen Ihre Zeit wahrscheinlich nicht wert sind.

Für die Neugierigen:

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 translate3doder der Wert in translateZbewegt das Element in Richtung des Betrachters, negative Werte entfernt.

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

Der dritte Wert in scale3doder der Wert in scaleZbeeinflusst die Skalierung entlang der z-Achse (z. B. die imaginäre Linie, die direkt aus dem Bildschirm kommt).

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

rotateXund rotateYdreht ein Element im 3D-Raum um diese Achsen. rotate3dMit dieser Option können Sie einen Punkt im 3D-Raum angeben, um den das Element gedreht werden soll.

matrix3d(… )

Eine Möglichkeit, eine 3D-Transformation in einem 4 × 4-Raster programmgesteuert zu beschreiben. Niemand wird jemals eines davon von Hand schreiben.

perspective(value)

Dieser Wert wirkt sich nicht auf das Element selbst aus, sondern auf die Transformationen der 3D-Transformationen absteigender Elemente, sodass alle eine konsistente Tiefenperspektive haben.

Mehr Informationen

  • MDN-Dokumente zur Transformation und Verwendung.
  • David DeSandros Dokumentation zu 3D-Transformationen
  • Surfin 'Safari: 3D-Transformationen
  • W3C-Spezifikation für CSS3-Transformationen
  • Einführung in CSS 3D-Transformationen

Browser-Unterstützung

2D-Transformationen

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein 3.1+ 3.5+ 10,5+ 9+ 4.1+ Mindestens 4

3D-Transformationen

Chrom Safari Feuerfuchs Oper IE Android iOS
10+ 4+ 12+ keiner 10+ 4.1+ 5+

Herstellerpräfixe

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )