matrix()

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

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

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

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

Spécification	État	Commentaires
CSS Transforms Level 1 La définition de 'matrix()' dans cette spécification.	Version de travail	Définition initiale.

Compatibilité des navigateurs

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.