Funkcja CSS matrix()

Poprzednia strona Funkcja log() w CSS
Następna strona Funkcja matrix3d() w CSS
Wróć do poprzedniego poziomu Podręcznik referencyjny funkcji CSS

Definicja i użycie

CSS matrix() Funkcja definiuje dwuwymiarowe przekształcenie za pomocą macierzy zawierającej sześć wartości.

matrix() Funkcja przyjmuje sześć parametrów, które pozwalają na obrót, skalowanie, przesunięcie i nachylenie elementu.

Parametry takie jak: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Przykład

Przykład 1

Użyj matrix() Zdefiniuj dwuwymiarowe przekształcenie dla kilku elementów <div>:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Spróbuj sam

Przykład 2

Użyj matrix() Utwórz dwuwymiarowe przekształcenie obrazu:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Spróbuj sam

Gramatyka CSS

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Wartość	Opis
scaleX()	Wymagane. Liczba, używana do skalowania szerokości elementu.
skewY()	Wymagane. Liczba (kąt), używana do przekształcenia nachylenia wzdłuż osi Y.
skewX()	Wymagane. Liczba (kąt), używana do przekształcenia nachylenia wzdłuż osi X.
scaleY()	Wymagane. Liczba, używana do skalowania wysokości elementu.
translateX()	Wymagane. Liczba, używana do przesunięcia elementu wzdłuż osi X.
translateY()	Wymagane. Liczba, używana do przesunięcia elementu wzdłuż osi Y.