2D -Transformationsmethoden in CSS

Bei der Gestaltung einer Website ist es häufig erforderlich. Zu diesem Zweck können wir die CSS -Transformationseigenschaft verwenden, mit der wir die Position, Größe oder Form eines Elements ändern können. In CSS gibt es zwei Arten von Transformationen, die 2D -Transformation und 3D -Transformation sind.

In diesem Leitfaden werden wir uns jedoch an die 2D -Transformation halten und die verschiedenen 2D -Transformationsmethoden kennenlernen.

2D -Transformationsmethoden in CSS

Es gibt verschiedene 2D -Transformationsmethoden in CSS, die wie folgt sind.

1. Translate () Methode
2. rotate () Methode
3. scale () Methode
4. scalex () Methode
5. scaley () Methode
6. Verschleierung () Methode
7. SEWWX () -Methode
8. Verdrehung () Methode
9. matrix () Methode

Diese werden unten ausführlich erklärt.

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)

Oder,

Transformation: Translate (TX)

Der TX und TY beziehen sich auf die X- und Y -Achsen.

Beispiel
Angenommen, Sie möchten ein Bild mit der Methode Translate () in eine bestimmte Position verschieben und dann dem folgenden Beispiel folgen.

Html

CSS

img
Breite: 250px;
Höhe: 100px;
Transformation: Translate (50px, 50px);

Ausgang
Ohne Translate () Methode.

Mit Translate () Methode.

Die Methode translate () hat das Bild 50px von der oberen und 5-px von der linken Seite erfolgreich übersetzt.

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 (Grad)

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

Beispiel
Betrachten Sie das folgende Beispiel, um die Arbeit der Rotate () -Methode zu verstehen.

Html

Dies ist ein normaler Div -Behälter.


Dieser Div -Behälter wird im Uhrzeigersinn um 25 Grad gedreht.


Dieser Div-Behälter wird gegen den Uhrzeigersinn um 25 Grad gedreht.

Hier haben wir drei Div -Container angegeben, um das Konzept der Rotate () -Methode zu demonstrieren.

CSS

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

.im Uhrzeigersinn
Transformation: Drehen (25 Grad);

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

Im obigen Code geben wir zunächst einige Breite, Höhe, Hintergrundfarbe und Rand für die Div -Behälter. Danach drehen wir den zweiten Div um 25 Grad im Uhrzeigersinn und den dritten Div um 25 Grad gegen den Uhrzeigersinn. Beachten Sie, dass wir zum Drehen gegen den Uhrzeigersinn negative Werte verwenden.

Ausgang

Die rotate () -Methode wurde implementiert und verifiziert.

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)

Oder,

Transformation: Skala (SX)

Der SX und SY repräsentieren die horizontalen bzw. vertikalen Dimensionen.

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

Html

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

Im obigen Code haben wir einfach ein DIV -Element erstellt.

CSS

div
Breite: 200px;
Höhe: 100px;
Rand: 130px;
Hintergrundfarbe: Bisque;
Grenze: 1PX Solid Black;
Transformation: Skala (2,2);

Unter Verwendung von CSS -Eigenschaften zuweisen wir dem Div -Element eine gewisse Breite, Höhe und Rand. Schließlich verwenden wir die malatische () -Methode, um die Breite und Höhe des Elements doppelt so hoch wie seine ursprüngliche Breite und Höhe zu erhöhen.

Ausgang

Die Größe des Div -Behälters wurde unter Verwendung der Skala () -Methode erhöht.

scalex () Methode

Zum Zweck der Veränderung der Breite eines Elements wird die scalex () -Methode verwendet.

Syntax

Transformation: Scalex (SX)

Der SX -Parameter repräsentiert die horizontale Dimension eines Elements.

Beispiel
Angenommen, Sie möchten die Breite eines Elements verringern und dann das folgende Beispiel konsultieren.

CSS

div
Transformation: scalex (0.5);

Im obigen Code verwenden wir die scalex () -Methode, um die Breite eines Div -Containers zu verringern.

Ausgang

Die scalex () -Methode funktioniert ordnungsgemäß.

scaley () Methode

Zum Zweck der Veränderung der Höhe eines Elements wird die maley () -Methode verwendet.

Syntax

Transformation: Skalyy (Sy)

Der SY-Parameter definiert den Wert der y-Achse.

Beispiel

Betrachten Sie das folgende Beispiel unten.

CSS

div
Transformation: scaley (2);

Hier verwenden wir die maley () -Methode, um die Höhe des DIV -Elements zu erhöhen.

Ausgang

Die Höhe des DIV -Elements wurde zweifache seiner ursprünglichen Höhe erhöht.

Verschleierung () Methode

Diese Methode verzerrt ein Element horizontal und vertikal, basierend auf den angegebenen Grad.

Syntax

Transformation: Verseckung (SX, SY)

Oder,

Transformation: Sub (SX)

Der SX und SY repräsentieren die x- und y -Achsen.

Beispiel
Angenommen, Sie möchten ein Element entlang von X- und Y -Achsen verzerren…

Html

Dies ist ein normaler Div -Behälter.


Dieser Div -Behälter ist horizontal 10 Grad und vertikal um 15 Grad verdrängt.

Hier haben wir zwei Div -Container definiert, um die Arbeit der SWEW () -Methode zu demonstrieren.

CSS

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

.schief
Transformation: SCEW (10DEG, 15DEG);

Abgesehen vom Styling der Div-Behälter verzerren wir den zweiten Div-Behälter 10 Grad entlang der x-Achse und 15 Grad entlang der Y-Achse.

Ausgang

Der Div -Behälter wurde horizontal und vertikal verzerrt.

SEWWX () -Methode

Um ein bestimmtes Element horizontal zu verzerren, basierend auf den angegebenen Grad.

Syntax

Transformation: Sub (SX)

Der SX-Parameter definiert die x-Achse.

Beispiel
Angenommen, Sie möchten ein Element 15 Grad horizontal verzerren.

CSS

.schief
Transformation: Skewx (15 Grad);

Mit der SEWWX () -Methode verzerren wir das Divelelement 15 Grad horizontal.

Ausgang

Die scalex () -Methode funktioniert ordnungsgemäß.

Verdrehung () Methode

Um ein bestimmtes Element vertikal zu verzerren, basierend auf den angegebenen Abschlüssen, wird die scwy () -Methode verwendet.

Syntax

Transformation: Verseckung (SY)

Der SY-Parameter definiert die y-Achse.

Beispiel
Angenommen, Sie möchten ein Element 15 Grad vertikal verzerren.

CSS

.schief
Transformation: Skewy (15 Grad);

Mit der SEWX () -Methode verzerren wir das DIV -Element 15 Grad vertikal.

Ausgang

Die maley () -Methode funktioniert ordnungsgemäß.

matrix () Methode

Zum Zwecke der Übersetzung, Drehung, Skalierung und Verschleierung von Elementen auf einmal wird die matrix () -Methode verwendet.

Syntax

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

Sie können allen Eigenschaften Werte zuweisen, die sie trennen.

Beispiel

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

Html

Dies ist ein normaler Div -Behälter.


Der Div -Container nach Verwendung der matrix () -Methode.


Der Div -Container nach Verwendung der matrix () -Methode.

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

CSS

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

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

.matrix2
Transformation: Matrix (1, 0, 0.5, 1, 150, 0);

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

Ausgang

Die Matrixmethode funktioniert ordnungsgemäß.

Abschluss

Zum Zwecke der Positionierung, Drehung, Skalierung oder Abblenden von Elementen entlang der X- und Y -Achse stehen in CSS verschiedene 2D -Transformationsmethoden zur Verfügung. Die grundlegenden 2D -Transformationsmethoden in CSS werden übersetzt (), rotate (), scale (), skew () und matrix () werden übersetzt. Jede dieser Methoden dient einem anderen Zweck, den wir in diesem Artikel zusammen mit einem relevanten Beispiel erklärt haben.