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 ℝ²	Coordonnées homogènes sur ℝℙ²	Coordonnées cartésiennes sur ℝ³	Coordonnées homogènes sur ℝℙ³
$(\begin{matrix} a & c \\ b & d \end{matrix})$	$(\begin{matrix} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} a & c \\ b & d \end{matrix})$	`[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

BCD tables only load in the browser