Jak wykorzystać matrix transform i inne właściwości transform CSS?

Powyższa właściwość transformacji należy do kategorii właściwości CSS transformacje 2D . Oprócz wspomnianej powyżej metody matrix(), Istnieje kilka innych metod, które towarzyszą transformacji:

translate(), rotate(), scale() i skew()

Aby zrozumieć metodę matrix(), najlepiej najpierw zrozumieć pozostałe cztery typy.

Transformaty:

Te cztery metody transformacji są dokładnie takie, jak dźwięk.

Tłumaczenie:

Sprawdź przykład tłumaczenia tutaj .

translate(e, f) przyjmuje dwa argumenty. Pierwszym argumentem jest pozycja x elementu, podczas gdy drugim jest pozycja y-oba względem jego początkowego położenia. Jeśli chcesz przenieść element 50px w prawo i 100px w dół, CSS wyglądałby jak transform: translate(50px, 100px);. Dodatnie X jest prawe, dodatnie Y jest w dół; liczby ujemne przesuwają element w przeciwnym kierunek.

ROTATE:

zobacz przykład rotate tutaj .

rotate(c) bierze w jednym argumencie, czyli ilość rotacji, którą chcesz mieć element. Dodatni obrót jest zgodny z ruchem wskazówek zegara, ujemny jest przeciwnie do ruchu wskazówek zegara. Obracanie elementu o 30 stopni zgodnie z ruchem wskazówek zegara (dodatnie) wyglądałoby jak transform: rotate(30deg);. Zauważ, że tym razem argument jest w deg i , a nie px.

Skala:

zobacz przykład skali tutaj .

scale(a, d) przyjmuje dwa argumenty. Pierwszy argument to kwota do skalowania w kierunku X, podczas gdy drugi argument to kwota do skalowania w kierunku Y. Skalowanie działa przez pomnożenie bieżącej wartości (szerokość, wysokość) przez wartość skali. Skalowanie elementu 2 razy w kierunku X i 4 razy w kierunku Y wygląd transform: scale(2, 4);. Argumentami mogą być dowolne wartości, w tym dziesiętne, a nawet ujemne. Wartości ujemne mają wpływ na przewrócenie elementu wokół odpowiedniej osi.

zobacz przykład pochylenia tutaj .

skew(b, c) jest potencjalnie najbardziej mylącą transformacją do wyjaśnienia. skew(c, d) przyjmuje dwa argumenty. Pierwszy argument odpowiada powierzchniom poziomym (góra i dół), natomiast drugi argument odpowiada powierzchni pionowej (lewej i prawej). Oba argumenty znajdują się w deg, podobnie jak w rotate(). Wartości dodatnie dla pierwszego argumentu obrócą powierzchnie pionowe w kierunku przeciwnym do ruchu wskazówek zegara wokół ich punktów środkowych. Wartości ujemne obrócą pionowe powierzchnie zgodnie z ruchem wskazówek zegara wokół ich punktów środkowych. Wartości dodatnie dla drugiego argumentu obracają powierzchnie poziome zgodnie z ruchem wskazówek zegara wokół ich punktów środkowych, natomiast wartości ujemne obracają powierzchnie poziome powierzchnie przeciwnie do ruchu wskazówek zegara. Limit (w deg) dla każdego argumentu wynosi + - 90deg - jak pokazano w poniższym przykładzie.

Macierz:

zobacz przykład macierzy tutaj .

matrix(a, b, c, d, e, f) robi wszystko, co wcześniej wymienione przekształcenie.

Dwa argumenty, a i {[21] } są dla skalowania elementu w kierunku X i kierunku Y, odpowiednio. identycznie jak z metoda scale(a, d).

Drugi i trzeci argument b i {[24] } służą do wypaczania elementu. Obie wartości działają identycznie jak w metodzie skew(b, c).

Wreszcie, dwa ostatnie argumenty e i {[27] } są dla tłumaczenia elementu w kierunku X i kierunku Y, odpowiednio. identycznie do metody translate(e, f).

Możesz użyć transformacji matrix(), aby osiągnąć niesamowite efekty. Zobacz też ta strona, gdzie przewinięcie strony w dół (na komputerach, a nie urządzeniach mobilnych) powoduje transformację elementów na stronie za pomocą metody matrix(). Daje świetny efekt!

Wreszcie, istnieją różne składnie dla różnych przeglądarek. Według w3schools tutaj są następujące

transform:
-ms-transform: /* IE 9 */
-webkit-transform: /* Safari and Chrome */

Najlepszą praktyką jest przetestowanie ich na różnych przeglądarkach przed uruchomieniem witryny.

Aby uzyskać więcej informacji o różnych transformacjach 2D, sprawdź ten link . Dla matematyki za matrix() Metoda, sprawdź ten link .