matrix()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

La fonction matrix() définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation.

matrix(a, b, c, d, tx, ty) est une notation raccourcie, équivalente à matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Syntaxe

La fonction matrix() s'utilise avec 6 valeurs. Les valeurs constantes sont implicites et ne sont pas passées comme paramètres. Les autres paramètres sont décrits dans l'ordre suivant d'abord les colonnes.

css
matrix(a, b, c, d, tx, ty)

Valeurs

a b c d

Les coefficients de la matrice, de type <number>, qui définissent la transformation linéaire.

tx ty

Les coefficients de la matrice, de type <number>, qui définissent la translation à appliquer.

Note : Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs <length> pour les coefficients tx et ty.

Coordonnées cartésiennes sur ℝ2 Coordonnées homogènes sur ℝℙ2 Coordonnées cartésiennes sur ℝ3 Coordonnées homogènes sur ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]

Exemples

HTML

html
<p>toto</p>
<p class="transformation">truc</p>

CSS

css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  transform: matrix(0.87, -0.5, 0, 0.87, 0, 1);
  background-color: blue;
}

Résultat

Spécifications

Specification
CSS Transforms Module Level 1
# funcdef-transform-matrix

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
matrix()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Voir aussi