CSS matrix() funktion
- Föregående sida CSS log() funktion
- Nästa sida CSS matrix3d() funktion
- Åter till föregående nivå CSS funktion referenshandbok
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); }
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); }
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
- Föregående sida CSS log() funktion
- Nästa sida CSS matrix3d() funktion
- Åter till föregående nivå CSS funktion referenshandbok