CSS matrix() functie

Vorige pagina CSS log() functie
Volgende pagina CSS matrix3d() functie
Ga een niveau omhoog CSS Functie Referentie Handboek

Definitie en gebruik

CSS matrix() De functie definieert een tweedimensionale transformatie door een matrix van zes waarden te bevatten.

matrix() De functie accepteert zes parameters die het mogelijk maken om elementen te roteren, te schalen, te verplaatsen en te schuiven.

Parameters zijn als volgt: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

Voorbeeld

Voorbeeld 1

Gebruik matrix() Definieer een tweedimensionale transformatie voor meerdere <div>-elementen:

#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);
}

Probeer het zelf

Voorbeeld 2

Gebruik matrix() Maak een tweedimensionale transformatie voor de afbeelding:

#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);
}

Probeer het zelf

CSS syntaxis

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

Waarde	Beschrijving
scaleX()	Verplicht. Getal, gebruikt om de breedte van het element te schalen.
skewY()	Verplicht. Getal (hoek), gebruikt om een schuiftransformatie uit te voeren langs de Y-as.
skewX()	Verplicht. Getal (hoek), gebruikt om een schuiftransformatie uit te voeren langs de X-as.
scaleY()	Verplicht. Getal, gebruikt om de hoogte van het element te schalen.
translateX()	Verplicht. Getal, gebruikt om elementen te verplaatsen langs de X-as.
translateY()	Verplicht. Getal, gebruikt om elementen te verplaatsen langs de Y-as.