--- title: matrix() slug: Web/CSS/transform-function/matrix() tags: - CSS - Fonction - Reference - Transformations CSS translation_of: Web/CSS/transform-function/matrix() ---
{{CSSRef}}

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 {{cssxref("<number>")}}, qui définissent la transformation linéaire.
tx ty
Les coefficients de la matrice, de type {{cssxref("<number>")}}, qui définissent la translation à appliquer.

Note : Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<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

<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

{{EmbedLiveSample("Exemples","100%","200")}}

Spécifications

Spécification État Commentaires
{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}} {{Spec2("CSS3 Transforms")}} Définition initiale.

Compatibilité des navigateurs

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

Voir aussi