Jak poruszać, obracać, skalować i wypaczać elementy w CSS?

Projektanci stron internetowych często chcą zrobić kilka interesujących rzeczy z elementami pojawiającymi się na ich stronie internetowej, aby wzbudzić wzrok przy sobie. Właściwość transformacji CSS umożliwia poruszanie się, obracanie, skalowanie i wypaczenie elementów wzdłuż osi X i Y lub wzdłuż osi X, Y i Z. Ta właściwość składa się z niektórych metod, które pozwalają łatwo wykonywać te zadania. Metody te są szeroko sklasyfikowane na dwie grupy, które są następujące.

1. Metody transformacji 2D
2. Metody transformacji 3D

Nauczmy się ich szczegółowo.

Metody transformacji 2D

Aby poruszać, obracać, skalować i wypaczać elementy wzdłuż osi X, a osi Y, CSS zapewnia różne metody, które należą do kategorii metod transformacji 2D. Tutaj wymieniliśmy dla Ciebie podstawowe metody transformacji 2D.

1. Metoda translate ()
2. Metoda ROTATE ()
3. Metoda skali ()
4. metoda skew ()
5. Metoda matrix ()

Poniżej szczegółowo wyjaśniliśmy te metody.

Metoda translate ()

Metoda CSS tłumacz () zmienia pozycję elementu wzdłuż osi x (poziomo) lub wzdłuż osi y (pionowo) w oparciu o przypisane parametry.

Składnia

Transform: Tłumacz (TX, TY)

Parametry TX i TY reprezentują osie X i Y.

Przykład
Załóżmy, że chcesz przenieść obraz do określonej pozycji za pomocą metody tłumacz (). Oto odpowiedni kod.

Html

Bez tłumaczenia:

Z tłumaczeniem:

Tutaj stworzyliśmy dwa elementy div i umieściliśmy w nich obraz.

CSS

.div
szerokość: 50px;
Margines: 20px;

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

Oprócz nadania pewnej szerokości i marginesu elementom DIV, stosujemy metodę Translate () na drugim obrazie.

Wyjście

Obraz został pomyślnie przeniesiony za pomocą metody tłumaczenia ().

Metoda ROTATE ()

W celu obrócenia elementu zgodnie z ruchem wskazówek zegara lub przeciwnym do ruchu wskazówek zegara stosowana jest metoda rotacji ().

Składnia

Transform: Rotate (RX, RY, stopnie)

Parametr stopni określa kąt, z którego należy obrócić element.

Przykład
Załóżmy, że chcesz obrócić pojemnik Div ​​zarówno zgodnie z ruchem wskazówek zegara, jak i przeciwnie. Użyj metody rotate ().

Html

Normalny kontener DIV.


Obrócone 30 stopni w prawo.

R
Obrócone 30 stopni przeciwnie do ruchu wskazówek zegara.

Aby zademonstrować działanie metody rotacji () zdefiniowano trzy pojemniki DIV.

CSS

div
szerokość: 250px;
Wysokość: 100px;
kolor tła: Rosybrown;
granica: 1px stały szary;

.Zgodnie z ruchem wskazówek zegara
Transform: Rotate (30Deg);

.przeciwne ruchome
Transform: Rotate (-30DEG);

W powyższym kodzie obracamy drugie div 30 stopni zgodnie z ruchem wskazówek zegara i trzeci DIV 30 stopni. Wartości ujemne są używane do obracania elementu przeciw zgodnie z ruchem wskazówek zegara.

Wyjście

Metoda obrotu działa poprawnie.

Metoda skali ()

W celu zwiększenia lub zmniejszenia wielkości elementu na podstawie określonej szerokości i wysokości jest stosowana metoda skali ().

Składnia

Transform: Scale (SX, SY)

Osie x i y są zdefiniowane przez parametr SX i SY.

Przykład
Poniższy przykład pokazuje działanie metody Scale ().

Html

Oryginalny rozmiar kontenera Div
Rozmiar pojemnika Div jest zwiększony półtora razy jego pierwotnej szerokości i wysokości.

Po prostu stworzyliśmy dwa elementy div.

CSS

div
szerokość: 200px;
Wysokość: 100px;
Margines: 50px;
kolor tła: Rosybrown;
granica: 1px Solid Black;

.skala
Transform: Skala (1.5,1.5);

Używamy metody Scale () w celu zwiększenia szerokości i wysokości elementu o półtora razy jej pierwotną szerokość i wysokość.

Wyjście

Rozmiar pojemnika Div został skalowany za pomocą metody Scale ().

metoda skew ()

Metoda skew () wypacza element poziomo (wzdłuż osi x) i pionowo (wzdłuż osi y) w oparciu o określone stopnie.

Składnia

Transform: Skew (SX, SY)

Lub,

Transform: Skew (SX)

Dwa wymiary są reprezentowane przez parametry SX i SY.

Przykład
Załóżmy, że chcesz wypaczyć element zarówno poziomo, jak i pionowo, a następnie rozważ poniższy przykład.

Html

Oryginalny kontener DIV.


Ten pojemnik Div ​​jest wypaczony 8 stopni poziomo, a 9 stopni pionowo.

Tutaj zdefiniowaliśmy dwa kontenery Div, aby zademonstrować pojęcie metody Skew ().

CSS

div
szerokość: 200px;
Wysokość: 100px;
kolor tła: Rosybrown;
granica: 1px stały szary;

.Skew
Transform: Skew (8Deg, 9Deg);

Parzymy drugi pojemnik Div ​​8 stopni wzdłuż osi x i 9 stopni wzdłuż osi y.

Wyjście

Element został pomyślnie wypaczony.

Metoda matrix ()

W celu przetłumaczenia, obracania, skalowania i wypaczenia elementów jednocześnie stosowana jest metoda matrix ().

Składnia

Transform: Matrix (scalex (), Skewy (), Skewx (), scaley (), tłumacz (), tłumacz ()))

Wartości odpowiednich metod można przypisać jako parametry.

Przykład
Zrozumiemy działanie metody Matrix () przy użyciu następującego przykładu.

Html

Oryginalny kontener DIV.


Po zastosowaniu metody pierwszej Matrix ().


Po użyciu metody drugiej Matrix ().

Aby zademonstrować działanie metody Matrix (), stworzyliśmy trzy elementy div.

CSS

div
szerokość: 200px;
Wysokość: 100px;
kolor tła: Rosbrown;
granica: 1px stały szary;

.Matrix1
Transform: Matrix (1, -0.4, 0, 1, 0, 0);

.Matrix2
Transform: Matrix (1, 0, 0.4, 1, 120, 0);

Przypisujemy różne wartości do różnych parametrów metody Matrix ().

Wyjście

Metoda Matrix () działa poprawnie.

Teraz, gdy dowiedzieliśmy się o metodach transformacji 2D, zbadajmy metody transformacji 3D.

Metody transformacji 3D

Aby poruszać, obracać i skalować i wypaczać elementy wzdłuż osi X, osi Y i osi Z, CSS zapewnia różne metody określane jako metody transformacji 3D. Podstawowe metody transformacji 3D są następujące

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

Poniżej wyjaśniliśmy te metody.

Metoda tłumacza3d ()

Metoda stosowana do zmiany położenia elementu wzdłuż osi x, y i z na podstawie przypisanych parametrów jest określana jako metoda tłumacza3d ().

Składnia

Transform: Translate3d (TX, TY, TZ)

Trzy wymiary są reprezentowane przez parametry TX, TY i TZ.

Przykład
Załóżmy, że chcesz zmienić pozycję obrazu wzdłuż wszystkich trzech osi. Użyj metody Translate3D ().

Html

Bez tłumaczenia:

Z tłumaczeniem:

Ten sam obraz został umieszczony w obu pojemnikach, aby zademonstrować efekt metody tłumaczy3d ().

CSS

.div
szerokość: 50px;
Margines: 20px;

.Tłumaczyć
Transform: Translate3d (25px, 25px, 40px);

Używamy metody Translate3D () do zmiany pozycji drugiego pojemnika Div.

Wyjście

Obraz został przetłumaczony za pomocą metody tłumaczy3d ().

Metoda rotate3d ()

W celu obrócenia elementu zgodnie z ruchem wskazówek zegara lub przeciwnym do ruchu wskazówek zegara wzdłuż X, Y i Z w oparciu.

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 należy obrócić element.

Przykład
Załóżmy, że chcesz obrócić obraz w przestrzeni 3D.

CSS

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

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

Obracamy drugi pojemnik Div, określając wartości osi x, y i z i kąt. Zauważ, że ustawiliśmy również właściwość perspektywiczną na 300px, co określa perspektywę elementu.

Wyjście

Obraz został pomyślnie obrócony.

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)

Powyższe parametry określają trzy wymiary.

Przykład
Zobaczmy, co stanie się z tym samym obrazem, którego używa się w powyższym przykładzie, przy użyciu metody Scale3D ().

CSS

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

.Skala
Transform: Scale3d (1, 1, 1) Rotate3d (1, 0, 0, 60 stopni);

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

Metoda Scale3D () jest weryfikowana i działa poprawnie.

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

Każdy parametr przyjmuje wartość odpowiedniej metody.

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, -60Deg) Scale3D (1, 1, 1);

Obraz jest tłumaczony, obracany i skalowany jednocześnie.

Wyjście

Obraz został przeniesiony, obrócony i skalowany jednocześnie.

Wniosek

W celu poruszania się, obracania, skalowania i wypaczenia elementu istnieją różne metody dostępne w CSS, które należą do kategorii metod transformacji 2D i metod transformacji 3D. Metody tłumaczą (), rotate (), scale (), skew () i matrix () są pogrupowane w ramach metod transformacji 2D klasyfikacji, metody tłumacze3d (), rotate3d (), scale3d () i matrix3d ​​() leżeć w grupie metod transformacji 3D. Wszystkie te metody zostały szczegółowo wyjaśnione w tym przewodniku wraz z odpowiednimi przykładami.