3D -Transformationsmethoden in CSS

Um sicherzustellen, dass Ihr Webdesign hervorragend ist und die Benutzererfahrung verbessern, müssen Sie lernen, wie Sie verschiedene HTML -Elemente auf Ihrer Webseite festlegen können. Es gibt viele Dinge, die Sie mit Elementen tun können, um ihr Aussehen zu verbessern, z.

CSS bietet verschiedene Transformationsmethoden, die entweder in die Kategorie der 2D -Transformationsmethode oder in 3D -Transformationsmethoden fallen. In diesem Beitrag werden wir jedoch die 3D -Transformationsmethoden in CSS sehen.

3D -Transformationsmethoden in CSS

Es gibt verschiedene 3D -Transformationsmethoden in CSS; Einige der grundlegenden Methoden sind wie folgt.

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

Die oben genannten Methoden werden nachstehend ausführlich erläutert.

Translate3D () Methode

Die CSS -Methode Translate3D () ändert die Position eines Elements entlang der X-, y- und z -Achsen basierend auf den zugewiesenen Parametern.

Syntax

Transformation: Translate3D (TX, TY, TZ)

Die Parameter TX, TY und TZ repräsentieren die Achsen x, y und z.

Beispiel
Angenommen, Sie möchten die Position eines Bildes in der 3D -Dimension unter Verwendung der Methode Translate3D () ändern und dann dem folgenden Beispiel folgen.

Html

Ohne Übersetzung:

Mit Übersetzung:

Im obigen Code haben wir zwei DIV -Elemente erstellt und dasselbe Bild in beiden Containern platziert, um die Vor- und Nachwirkung der Translate3D () -Methode zu demonstrieren.

CSS

.div
Breite: 200px;
Höhe: 100px;
Rand: 30px;

.übersetzen
Transformation: Translate3D (30px, 30px, 50px);

Zuerst stellen wir dem Div -Behälter eine gewisse Breite, Höhe und Rand an. Anschließend verwenden wir die Methode Translate3D (), um die Position des zweiten Div -Containers zu ändern.

Ausgang

Die Position des Bildes wurde mithilfe der Translate3D () -Methode erfolgreich geändert.

rotate3d () Methode

Um ein Element im Uhrzeigersinn oder gegen den Uhrzeigersinn im 3D-Raum basierend auf dem angegebenen Grad zu drehen, wird die rotate () -Methode verwendet.

Syntax

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

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

Beispiel
Um die Arbeit der rotate3D () -Methode zu demonstrieren, werden wir das Beispiel verwenden, das im obigen Abschnitt i verwendet wird.e. Wir werden das Hundebild entlang der X-, Y- und Z -Achsen drehen.

CSS

.div
Breite: 200px;
Höhe: 100px;
Rand: 30px;
Perspektive: 300px;

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

Neben der Festlegung der Breite, der Höhe und des Randes des DIV -Elements stellen wir auch ihre Perspektive an. Die Perspektive -Eigenschaft definiert die Perspektivansicht eines Elements in der 3D -Dimension. Zuletzt drehen wir den zweiten Div -Behälter, indem wir die Werte von X, Y und Z und dem Winkel angeben.

Ausgang

Das Bild wurde in der 3D -Dimension 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 X-, Y- und Z -Achsen werden durch SX-, SY- und SZ -Parameter dargestellt.

Beispiel
Lassen Sie uns sehen, was mit dem Hundebild passiert, wenn Sie die Methode Scale3D () verwenden.

CSS

.div
Breite: 300px;
Höhe: 80px;
Rand: 30px;
Perspektive: 300px;

.Skala
Transformation: scale3d (1, 1, 1) rotate3d (1, 0, 0, 45de);

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

Das Hundebild wurde skaliert.

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

Die Werte verschiedener Methoden können den entsprechenden Parametern zugeordnet werden.

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

CSS

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

Wir bewegen, drehen und skalieren das Bild auf einmal.

Ausgang

Die matrix3d ​​() -Methode funktioniert ordnungsgemäß.

Andere 3D -Transformationsmethoden wurden in der folgenden Tabelle erklärt.

Methode	Beschreibung
Translatex (x) -Methode	Verändert die Position eines Elements entlang der x-Achse.
Translatey (Y) -Methode	Verändert die Position eines Elements entlang der y-Achse
TranslateZ (Z) -Methode	Verändert die Position eines Elements entlang der Z-Achse
rotatex (x) Methode	Dreht ein Element entlang der x-Achse.
rotate (y) -Methode	Dreht ein Element über die y-Achse.
Rotatez (Z) -Methode	Dreht ein Element entlang der Z-Achse.
Scalex (x) Methode	Skaliert das Element über die x-Achse.
Skalene (y) Methode	Skaliert das Element über die Y-Achse.
Scalez (Z) -Methode	Skaliert ein Element entlang der Z-Achse.
Perspektive (n) Methode	Es definiert die Perspektivansicht eines Elements im 3D -Raum.

Abschluss

Um Elemente entlang der X-, Y- und Z -Achsen zu positionieren, zu drehen und zu skalieren, sind in CSS verschiedene 3D -Transformationsmethoden verfügbar. Die grundlegenden 3D -Transformationsmethoden in CSS werden 3D (), scale3d (), rotate3d () und matrix3d ​​() übersetzt. Mit der Methode Translate3D () wird die Position eines Elements geändert. Die rotate3D () -Methode wird verwendet, um ein Element in der 3D -Dimension zu drehen. Die malatische 3D () -Methode wird verwendet, um die Größe eines Elements zu ändern, und matrix3d ​​() Die Methode wird verwendet, um alle diese Aufgaben gleichzeitig auszuführen. Alle diese Methoden werden zusammen mit relevanten Beispielen in diesem Leitfaden eingehend erklärt.