Wie man sich in CSS bewegt, dreht, skalieren und verzerrt?

Webdesigner möchten oft einige interessante Dinge mit den Elementen auf ihrer Website machen, um ihr Webdesign auf Augenhilfe zu machen. Mit der CSS -Transformation können Sie Elemente entweder entlang von x und y -Achsen oder entlang von x, y und z -Achsen bewegen, drehen, skalieren und verzerrt. Diese Eigenschaft besteht aus bestimmten Methoden, mit denen Sie diese Aufgaben leicht ausführen können. Diese Methoden werden weitgehend in zwei Gruppen eingeteilt, die wie folgt sind.

1. 2D -Transformationsmethoden
2. 3D -Transformationsmethoden

Lassen Sie uns sie ausführlich lernen.

2D -Transformationsmethoden

Um sich zu bewegen, zu drehen, zu skalieren und entlang der X-Achse zu schalten, und die Y-Achse liefert CSS verschiedene Methoden, die unter die Kategorie der 2D-Transformationsmethoden fallen. Hier haben wir einige grundlegende 2D -Transformationsmethoden für Sie aufgeführt.

1. Translate () Methode
2. rotate () Methode
3. scale () Methode
4. Verschleierung () Methode
5. matrix () Methode

Im Folgenden haben wir diese Methoden im Detail erläutert.

Translate () Methode

Die CSS-Methode translate () verändert die Position eines Elements entlang der x-Achse (horizontal) oder entlang der y-Achse (vertikal) basierend auf den zugewiesenen Parametern.

Syntax

Transformation: Translate (TX, TY)

Die TX- und TY -Parameter repräsentieren die x- und y -Achsen.

Beispiel
Angenommen, Sie möchten ein Bild mit der Methode Translate () in eine bestimmte Position verschieben. Hier ist der entsprechende Code.

Html

Ohne Übersetzung:

Mit Übersetzung:

Hier haben wir zwei DIV -Elemente erstellt und ein Bild in beide platziert.

CSS

.div
Breite: 50px;
Rand: 20px;

.übersetzen
Transformation: Translate (30px, 30px);

Abgesehen davon, dass wir den Divelementen eine gewisse Breite und einen gewissen Rand verleihen, wenden wir die Translate () -Methode auf das zweite Bild an.

Ausgang

Das Bild wurde mit der Translate () -Methode erfolgreich verschoben.

rotate () Methode

Zum Zweck des Drehens eines Elements im Uhrzeigersinn oder gegen den Uhrzeigersinn basierend auf dem angegebenen Grad wird die rotate () -Methode verwendet.

Syntax

Transformation: Drehen (RX, RY, Grad)

Der Gradparameter definiert den Winkel, aus dem das Element gedreht werden sollte.

Beispiel
Angenommen, Sie möchten einen Div-Behälter sowohl im Uhrzeigersinn als auch gegen den Uhrzeigersinn drehen. Verwenden Sie die rotate () -Methode.

Html

Normaler Div -Behälter.


30 Grad im Uhrzeigersinn umgedreht.

R
Um 30 Grad gegen den Uhrzeigersinn gedreht.

Um die Arbeit der Rotate () -Methode zu demonstrieren, wurden drei Div -Behälter definiert.

CSS

div
Breite: 250px;
Höhe: 100px;
Hintergrundfarbe: Rosybrown;
Grenze: 1px Festgrau;

.im Uhrzeigersinn
Transformation: Drehen (30 °);

.gegen den Uhrzeigersinn
Transformation: Drehen (-30 Grad);

Im obigen Code drehen wir den zweiten Div um 30 Grad im Uhrzeigersinn und den dritten DIV um 30 Grad gegen den Uhrzeigersinn. Negative Werte werden verwendet, um ein Element gegen den Uhrzeigersinn zu drehen.

Ausgang

Die Drehmethode funktioniert ordnungsgemäß.

scale () Methode

Um die Größe eines Elements basierend auf der angegebenen Breite zu verbessern oder zu verringern, und die Höhe des Maßstabs () wird verwendet.

Syntax

Transformation: Skala (SX, SY)

Die x- und y -Achsen werden durch den SX- und SY -Parameter definiert.

Beispiel
Das folgende Beispiel demonstriert die Arbeit der scale () -Methode.

Html

Originalgröße des Div -Behälters
Die Größe des Div -Behälters wird eineinhalb Mal seiner ursprünglichen Breite und der Höhe erhöht.

Wir haben einfach zwei Divelemente geschaffen.

CSS

div
Breite: 200px;
Höhe: 100px;
Rand: 50px;
Hintergrundfarbe: Rosybrown;
Grenze: 1PX Solid Black;

.Skala
Transformation: Skala (1.5,1.5);

Wir verwenden die mala () -Methode, um die Breite und Höhe des Elements eineinhalb Mal seine ursprüngliche Breite und Höhe zu erhöhen.

Ausgang

Die Größe des Div -Behälter.

Verschleierung () Methode

Die Skew () -Methode schießt ein Element horizontal (entlang der x-Achse) und vertikal (entlang der y-Achse) basierend auf den angegebenen Grad.

Syntax

Transformation: Verseckung (SX, SY)

Oder,

Transformation: Sub (SX)

Die beiden Dimensionen werden durch SX- und SY -Parameter dargestellt.

Beispiel
Angenommen, Sie möchten ein Element sowohl horizontal als auch vertikal verzerren und dann das folgende Beispiel betrachten.

Html

Original Div Container.


Dieser Div -Behälter ist horizontal 8 Grad und vertikal um 9 Grad verdrängt.

Hier haben wir zwei Div -Container definiert, um das Konzept der SCEW () -Methode zu demonstrieren.

CSS

div
Breite: 200px;
Höhe: 100px;
Hintergrundfarbe: Rosybrown;
Grenze: 1px Festgrau;

.schief
Transformation: SCEW (8DEG, 9DEG);

Wir verzerren den zweiten Div-Behälter 8 Grad entlang der x-Achse und 9 Grad entlang der Y-Achse.

Ausgang

Das Element wurde erfolgreich verzerrt.

matrix () Methode

Um die Elemente auf einmal zu übersetzen, zu drehen, zu skalieren und zu verzerren, wird die matrix () -Methode verwendet.

Syntax

Transformation: matrix (scalex (), scewy (), skewx (), scaley (), translatex (), translate ())

Die Werte der jeweiligen Methoden können als Parameter zugewiesen werden.

Beispiel
Lassen Sie uns die Arbeit der matrix () -Methode anhand des folgenden Beispiels verstehen.

Html

Original Div Container.


Nach Verwendung der ersten Matrix () -Methode.


Nach Verwendung der zweiten Matrix () -Methode.

Um die Arbeit der matrix () -Methode zu demonstrieren, haben wir drei Divelelemente erstellt.

CSS

div
Breite: 200px;
Höhe: 100px;
Hintergrundfarbe: Rosbrown;
Grenze: 1px Festgrau;

.matrix1
Transformation: Matrix (1, -0.4, 0, 1, 0, 0);

.matrix2
Transformation: Matrix (1, 0, 0.4, 1, 120, 0);

Wir weisen verschiedenen Parametern der matrix () -Methode unterschiedliche Werte zu.

Ausgang

Die matrix () -Methode funktioniert ordnungsgemäß.

Nachdem wir die 2D -Transformationsmethoden erfahren haben, untersuchen wir die 3D -Transformationsmethoden.

3D -Transformationsmethoden

Um sich zu bewegen, zu drehen und zu skalieren, und die Elemente entlang der X-Achse, der y-Achse und der Z-Achse entlang der Z-Achse enthält, bietet CSS verschiedene Methoden, die als 3D-Transformationsmethoden bezeichnet werden. Die grundlegenden 3D -Transformationsmethoden sind wie folgt

1. Translate3D () Methode
2. rotate3d () Methode
3. scale3d () Methode
4. matrix3d ​​() Methode

Wir haben diese Methoden unten im Detail erläutert.

Translate3D () Methode

Die Methode, mit der die Position eines Elements entlang der X-, Y- und Z -Achsen basierend auf den zugewiesenen Parametern geändert werden.

Syntax

Transformation: Translate3D (TX, TY, TZ)

Die drei Dimensionen werden durch die Parameter TX, TY und TZ dargestellt.

Beispiel
Angenommen, Sie möchten die Position eines Bildes entlang aller drei Achsen ändern. Verwenden Sie die Methode Translate3D ().

Html

Ohne Übersetzung:

Mit Übersetzung:

Das gleiche Bild wurde in beiden Behältern platziert, um die Vor- und Nachwirkung der Translate3D () -Methode zu demonstrieren.

CSS

.div
Breite: 50px;
Rand: 20px;

.übersetzen
Transformation: Translate3D (25px, 25px, 40px);

Wir verwenden die Translate3D () -Methode, um die Position des zweiten Div -Containers zu ändern.

Ausgang

Das Bild wurde mit der Methode Translate3D () übersetzt.

rotate3d () Methode

Zum Zweck des Drehens eines Elements im Uhrzeigersinn oder gegen den Uhrzeigersinn entlang x, y und z-Achsen basiert auf dem angegebenen Grad, wird die rotate () -Methode verwendet.

Syntax

Transformation: rotate3d (rx, ry, rz, grad)

Die Parameter RX-, RY- und RZ -Parameter definieren die drei Abmessungen, während der Grad -Parameter den Winkel angeben, aus dem das Element gedreht werden sollte.

Beispiel
Angenommen, Sie möchten ein Bild im 3D -Raum drehen.

CSS

.div
Breite: 200px;
Rand: 30px;
Perspektive: 300px;

.drehen
Transformation: rotate3d (0, 1, 0, 45 Grad);

Wir drehen den zweiten Div -Behälter, indem wir die Werte von X, Y und Z Achsen und des Winkels angeben. Beachten Sie, dass wir auch die Perspektiveigenschaft auf 300 PX festgelegt haben, was die Perspektivansicht eines Elements definiert.

Ausgang

Das Bild wurde erfolgreich gedreht.

scale3d () Methode

Um die Größe eines Elements basierend auf der angegebenen Breite und der Höhe zu verbessern oder zu verringern, wird die mala () -Methode verwendet. Damit diese Methode funktioniert, verwenden Sie sie zusammen mit anderen Transformationsmethoden wie Drehen und Perspektive.

Syntax

Transformation: Scale3D (SX, SY, SZ)

Die obigen Parameter geben die drei Dimensionen an.

Beispiel
Lassen Sie uns sehen, was mit demselben Bild passiert, das im obigen Beispiel verwendet wird, wenn die Methode scale3D () verwendet wird.

CSS

.div
Breite: 300px;
Rand: 30px;
Perspektive: 300px;

.Skala
Transformation: scale3d (1, 1, 1) rotate3d (1, 0, 0, 60 Grad);

Wie bereits erwähnt, müssen wir die Methode Scale3D () mit anderen Methoden verwenden, um den Effekt zu sehen. Daher verwenden wir sie zusammen mit der Rotate3D () -Methode.

Ausgang

Die Methode Scale3D () wird verifiziert und ordnungsgemäß funktioniert.

matrix3d ​​() Methode

Zum Zwecke der Übersetzung, Drehung und Skalierungselemente im 3D -Raum wird die Matrix () -Methode verwendet. Diese Methode macht 16 Werte in Form einer 4 × 4 -Matrix.

Syntax

Transformation: Matrix3d ​​(M, M, M, M, M, M, M, M, M, M, M, M, M, M, M)

Oder,

Transformation: matrix3d ​​(translate3d (), rotate3d (), scale3d ())

Jeder Parameter nimmt den Wert der jeweiligen Methode an.

Beispiel
Lassen Sie uns das Hundebild auf einmal übersetzen, drehen und skalieren.

CSS

.matrix
Transformation: Translate3D (10px, 10px, 20px) rotate3d (0, 1, 0, -60deg) scale3d (1, 1, 1);

Das Bild wird gleichzeitig übersetzt, gedreht und skaliert.

Ausgang

Das Bild wurde auf einmal bewegt, gedreht und skaliert.

Abschluss

Zum Zwecke des Bewegens, Drehens, Skalierens und Abblenden eines Elements gibt es verschiedene Methoden in CSS, die unter die Kategorien von 2D -Transformationsmethoden und 3D -Transformationsmethoden fallen. Die Methoden translate (), rotate (), scale (), skew () und matrix () werden unter den Klassifizierungs -2D -Transformationsmethoden gruppiert. Methoden translate3d (), rotate3d (), scale3d () und matrix3d ​​() werden inzwischen translate3d (), rotate3d () gruppiert. in der Gruppe der 3D -Transformationsmethoden liegen. Alle diese Methoden werden in diesem Leitfaden zusammen mit relevanten Beispielen ausführlich erläutert.