CSS matrix() funktion

Definition och användning

CSS matrix() Funktionen definierar en tvådimensionell transformation genom en matris som innehåller sex värden.

matrix() Funktionen accepterar sex parametrar som tillåter dig att rotera, skalera, flytta och sneda element.

Parametrarna är som följer: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

Exempel

Exempel 1

Använd matrix() Definiera tvådimensionella transformationer för flera <div>-element:

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

Prova själv

Exempel 2

Använd matrix() Skapa tvådimensionella transformationer för bilder:

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

Prova själv

CSS-syntax

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Värde Beskrivning
scaleX() Obligatorisk. Tal, används för att skalera elementets bredd.
skewY() Obligatorisk. Tal (vinkel), används för att utföra en snedvridning längs Y-axeln.
skewX() Obligatorisk. Tal (vinkel), används för att utföra en snedvridning längs X-axeln.
scaleY() Obligatorisk. Tal, används för att skalera elementets höjd.
translateX() Obligatorisk. Tal, används för att flytta element längs X-axeln.
translateY() Obligatorisk. Tal, används för att flytta element längs Y-axeln.

Tekniska detaljer

Version: CSS Transforms Modul Nivå 1

Webbläsarstöd

Talen i tabellen representerar den första versionen av webbläsaren som fullständigt stöder denna funktion.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Relaterade sidor

Referens:CSS transform egenskap

Referens:CSS matrix3d() funktion

Lär dig om:CSS 2D-omvandling