Metody transformacji 3D w CSS

W celu upewnienia się, że Twój projekt strony internetowej jest znakomity i zapewnia poprawę wrażenia użytkownika, musisz nauczyć się ustawić różne elementy HTML na swojej stronie internetowej. Istnieje wiele rzeczy, które możesz zrobić z elementami, aby poprawić ich wygląd, takie jak tłumaczenie, obracanie lub skala elementów w przestrzeni 2D lub 3D.

CSS zapewnia różne metody transformacji, które należą do kategorii metody transformacji 2D lub metod transformacji 3D. Jednak w tym poście zobaczymy metody transformacji 3D w CSS.

Metody transformacji 3D w CSS

Istnieją różne metody transformacji 3D w CSS; Niektóre z podstawowych metod są następujące.

1. Metoda tłumacza3d ()
2. Metoda rotate3d ()
3. Metoda scale3d ()
4. Metoda matrix3d ​​()

Wyżej wymienione metody zostały szczegółowo wyjaśnione poniżej.

Metoda tłumacza3d ()

Metoda CSS translate3d () zmienia pozycję elementu wzdłuż osi x, y i z na podstawie przypisanych parametrów.

Składnia

Transform: Translate3d (TX, TY, TZ)

Parametry TX, Ty i TZ reprezentują osie X, Y i Z.

Przykład
Załóżmy, że chcesz zmienić pozycję obrazu w wymiarze 3D za pomocą metody tłumacz3d (), a następnie postępuj zgodnie z przykładem.

Html

Bez tłumaczenia:

Z tłumaczeniem:

W powyższym kodzie utworzyliśmy dwa elementy div i umieściliśmy ten sam obraz w obu pojemnikach, aby zademonstrować efekt metody tłumaczenia3d ().

CSS

.div
szerokość: 200px;
Wysokość: 100px;
Margines: 30px;

.Tłumaczyć
Transform: Translate3d (30px, 30px, 50px);

Najpierw zapewniamy pojemnik Div ​​trochę szerokości, wysokości i marginesu. Następnie używamy metody Translate3d () do zmiany pozycji drugiego pojemnika Div.

Wyjście

Pozycja obrazu została pomyślnie zmieniona przy użyciu metody Translate3D ().

Metoda rotate3d ()

W celu obracania elementu zgodnie z ruchem wskazówek zegara lub przeciwnym do ruchu wskazówek zegara w przestrzeni 3D w oparciu o określony stopień, stosuje się metodę rotacji ().

Składnia

Transform: Rotate3d (RX, RY, RZ, stopnie)

Parametry RX, RY i RZ definiują trzy wymiary, podczas gdy parametr stopni określa kąt, z którego element należy obrócić.

Przykład
Aby zademonstrować działanie metody rotate3d (), użyjemy przykładu zastosowanego w powyższej sekcji I.mi. Zamierzamy obrócić obraz psa wzdłuż osi X, Y i Z.

CSS

.div
szerokość: 200px;
Wysokość: 100px;
Margines: 30px;
Perspektywa: 300px;

.obracać się
Transform: Rotate3d (0, 1, 0, 45Deg);

Oprócz ustawienia szerokości, wysokości i marginesu elementu DIV, dostosowujemy również jego perspektywę. Perspektywa właściwość określa perspektywę elementu w wymiarze 3D. Na koniec obracamy drugi pojemnik Div, określając wartości osi x, y i z i kąt.

Wyjście

Obraz został pomyślnie obrócony w wymiarze 3D.

Metoda scale3d ()

W celu zwiększenia lub zmniejszenia wielkości elementu na podstawie określonej szerokości i wysokości stosuje się metodę Scale (). Aby ta metoda działała, użyj jej wraz z innymi metodami transformacji, takimi jak obracanie i perspektywa.

Składnia

Transform: Scale3D (SX, SY, Sz)

Osie X, Y i Z są reprezentowane przez parametry SX, SY i SZ.

Przykład
Zobaczmy, co stanie się z obrazem psa podczas użycia metody Scale3D ().

CSS

.div
szerokość: 300px;
Wysokość: 80px;
Margines: 30px;
Perspektywa: 300px;

.Skala
Transform: Scale3d (1, 1, 1) Rotate3d (1, 0, 0, 45Deg);

Jak już wspomniano, musimy użyć metody Scale3D () z innymi metodami, aby zobaczyć jej efekt, dlatego w powyższym kodzie używamy go wraz z metodą rotate3d ().

Wyjście

Obraz psa został skalowany.

Metoda matrix3d ​​()

W celu przetłumaczenia, obracania i skalowania elementów jednocześnie w przestrzeni 3D stosowana jest metoda matrix (). Ta metoda renderuje 16 wartości w postaci matrycy 4 × 4.

Składnia

Transform: Matrix3D (M, M, M, M, M, M, M, M, M, M, M, M, M, M, M, M)

Lub,

Transform: Matrix3d ​​(tłumacz3d (), rotate3d (), scale3d ())

Wartości różnych metod można przypisać do odpowiednich parametrów.

Przykład
Tłumaczmy, obracaj i skaluj obraz psa jednocześnie za pomocą metody Matrix3D ().

CSS

.Matrix
Transform: Translate3d (10px, 10px, 20px) Rotate3d (0, 1, 0, -45Deg) Scale3D (1, 1, 1);

Poruszamy się, obracamy i skalujemy obraz jednocześnie.

Wyjście

Metoda Matrix3D () działa poprawnie.

Inne metody transformacji 3D zostały wyjaśnione w poniższej tabeli.

metoda	Opis
Metoda tłumacza (x)	Zmienia pozycję elementu wzdłuż osi x.
Metoda tłumacza (y)	Zmienia pozycję elementu wzdłuż osi y
Metoda tłumacza (z)	Zmienia pozycję elementu wzdłuż osi Z
Metoda Rotatex (x)	Obraca element wzdłuż osi x.
Metoda Rotatey (Y)	Obraca element na osi y.
Metoda Rotatez (Z)	Obraca element wzdłuż osi Z.
Metoda scalex (x)	Skaluje element na osi x.
Metoda skali (y)	Skaluje element na osi y.
Metoda Scalez (Z)	Skaluje element wzdłuż osi Z.
Metoda perspektywy (N)	Definiuje perspektywa widoku elementu w przestrzeni 3D.

Wniosek

W celu pozycjonowania, obracania i skalowania elementów wzdłuż osi X, Y i Z Istnie różne metody transformacji 3D dostępne w CSS. Podstawowe metody transformacji 3D w CSS to tłumacz3d (), scale3d (), rotate3d () i matrix3d ​​(). Metoda tłumacza3d () służy do zmiany pozycji elementu, metoda rotate3d () służy do obracania elementu w wymiarze 3D, metoda scale3d () służy do zmiany wielkości elementu i macierzy3d () Metoda stosuje się do wykonywania wszystkich tych zadań jednocześnie. Wszystkie te metody są szczegółowe wraz z odpowiednimi przykładami w tym przewodniku.