Metody transformacji 2D w CSS

Podczas projektowania strony internetowej często jest wymagane do pozycjonowania, obracania, skalowania lub wypaczenia elementów HTML w poziomie i w pionie, aby poprawić przeoczenie strony internetowej. W tym celu możemy użyć właściwości transformacji CSS, która pozwala nam zmienić pozycję, rozmiar lub kształt elementu. W CSS istnieją dwa rodzaje transformacji, które są transformacją 2D i transformacją 3D.

Jednak w tym przewodniku będziemy trzymać się transformacji 2D i dowiedzieć się o różnych metodach transformacji 2D.

Metody transformacji 2D w CSS

Istnieją różne metody transformacji 2D w CSS, które są następujące.

1. Metoda translate ()
2. Metoda ROTATE ()
3. Metoda skali ()
4. Metoda scalex ()
5. Metoda scaley ()
6. metoda skew ()
7. metoda skewx ()
8. metoda Skewy ()
9. Metoda matrix ()

Są one szczegółowo wyjaśnione poniżej.

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)

Lub,

Transform: Tłumacz (TX)

TX i Ty odnoszą się do osi x i y.

Przykład
Załóżmy, że chcesz przenieść obraz do określonej pozycji za pomocą metody tłumacz (), a następnie śledź poniższy przykład.

Html

CSS

img
szerokość: 250px;
Wysokość: 100px;
Transform: Tłumacz (50px, 50px);

Wyjście
Bez Translate () Method.

Za pomocą metody tłumaczenia ().

Metoda tłumacza () z powodzeniem przetłumaczy obraz 50px z góry i 5-px z lewej strony.

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: obrotu (stopnie)

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

Przykład
Rozważ poniższy przykład, aby zrozumieć działanie metody rotate ().

Html

To jest normalny kontener DIV.


Ten pojemnik Div ​​jest obracany o 25 stopni zgodnie z ruchem wskazówek zegara.


Ten pojemnik Div ​​jest obracany o 25 stopni na przeciw w prawo.

Tutaj określiliśmy trzy pojemniki Div, aby zademonstrować koncepcję metody rotate ().

CSS

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

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

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

W powyższym kodzie najpierw podajemy szerokość, wysokość, kolor tła i granicę kontenerom Div. Następnie obracamy drugą DIV 25 stopni zgodnie z ruchem wskazówek zegara, a trzeci DIV 25 stopni na antykordyce. Należy zauważyć, że aby obrócić przeciwnie do ruchu wskazówek zegara, używamy wartości ujemnych.

Wyjście

Metoda Rotate () została zaimplementowana i zweryfikowana.

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)

Lub,

Transform: Scale (SX)

SX i SY reprezentują odpowiednio wymiary poziome i pionowe.

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

Html

Rozmiar kontenera Div jest zwiększony dwa razy z jego pierwotnej szerokości i wysokości.

W powyższym kodzie po prostu utworzyliśmy element div.

CSS

div
szerokość: 200px;
Wysokość: 100px;
Margines: 130px;
kolor tła: bisque;
granica: 1px Solid Black;
transformacja: skala (2,2);

Korzystając z właściwości CSS, przypisujemy pewną szerokość, wysokość i margines do elementu DIV i na koniec używamy metody Scale () do zwiększenia szerokości i wysokości elementu dwukrotnie jej pierwotnej szerokości i wysokości.

Wyjście

Rozmiar pojemnika Div został zwiększony przy użyciu metody Scale ().

Metoda scalex ()

W celu zmiany szerokości elementu stosuje się metodę scalex ().

Składnia

Transform: Scalex (SX)

Parametr SX reprezentuje poziomy wymiar elementu.

Przykład
Powiedzmy, że chcesz zmniejszyć szerokość elementu, a następnie zapoznaj się z poniższym przykładem.

CSS

div
Transform: Scalex (0.5);

W powyższym kodzie używamy metody scalex () do zmniejszenia szerokości kontenera Div.

Wyjście

Metoda scalex () działa poprawnie.

Metoda scaley ()

W celu zmiany wysokości elementu stosuje się metodę Scaley ().

Składnia

Transform: Scaley (SY)

Parametr SY określa wartość osi y.

Przykład

Rozważ przykład poniżej.

CSS

div
Transform: Scaley (2);

Tutaj używamy metody Scaley () do zwiększenia wysokości elementu DIV.

Wyjście

Wysokość elementu DIV została zwiększona dwa razy większa niż pierwotna wysokość.

metoda skew ()

Ta metoda wypacza element poziomo i pionowo w oparciu o określone stopnie.

Składnia

Transform: Skew (SX, SY)

Lub,

Transform: Skew (SX)

SX i SY reprezentują osie x i y.

Przykład
Załóżmy, że chcesz wypaczyć element wzdłuż osi X i Y…

Html

To jest normalny kontener DIV.


Ten pojemnik Div ​​jest wypaczony 10 stopni poziomo, a 15 stopni pionowo.

Tutaj zdefiniowaliśmy dwa kontenery Div, aby zademonstrować działanie metody Skew ().

CSS

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

.Skew
Transform: Skew (10Deg, 15Deg);

Oprócz stylizacji pojemników DIV, wypaczamy drugi pojemnik DIV 10 stopni wzdłuż osi X i 15 stopni wzdłuż osi Y.

Wyjście

Pojemnik Div ​​został wypaczony poziomo i pionowo.

metoda skewx ()

Aby wypaczyć określony element poziomo w oparciu o stopnie określone metodę skewx ().

Składnia

Transform: Skew (SX)

Parametr SX definiuje oś x.

Przykład
Załóżmy, że chcesz wypaczyć element 15 stopni poziomo.

CSS

.Skew
Transform: Skewx (15Deg);

Za pomocą metody skewx () wypaczamy element DIV 15 stopni poziomo.

Wyjście

Metoda scalex () działa poprawnie.

metoda Skewy ()

Aby wypaczyć określony element pionowo w oparciu o stopnie określone metodę Skewy ().

Składnia

Transform: Skew (SY)

Parametr SY definiuje oś y.

Przykład
Załóżmy, że chcesz wypaczyć element 15 stopni pionowo.

CSS

.Skew
Transform: Skewy (15Deg);

Za pomocą metody skewx () wypaczamy element DIV 15 stopni pionowo.

Wyjście

Metoda Scaley () działa poprawnie.

Metoda matrix ()

W celu przetłumaczenia, obracania, skalowania i skośania elementów stosowana jest metoda Matrix ().

Składnia

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

Możesz przypisać wartości do wszystkich właściwości oddzielających je przecinki.

Przykład

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

Html

To jest normalny kontener DIV.


Pojemnik Div ​​po zastosowaniu metody matrix ().


Pojemnik Div ​​po zastosowaniu metody matrix ().

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

CSS

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

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

.Matrix2
Transform: Matrix (1, 0, 0.5, 1, 150, 0);

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

Wyjście

Metoda MATRIX działa poprawnie.

Wniosek

W celu pozycjonowania, obracania, skalowania lub skewek wzdłuż osi x i y istnieją różne metody transformacji 2D dostępne w CSS. Podstawowe metody transformacji 2D w CSS to tłumacz (), rotacie (), scale (), skew () i matrix (). Każda z tych metod służy inny cel, który wyjaśniliśmy w tym artykule wraz z odpowiednim przykładem.