Fonction CSS matrix()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La fonction CSS matrix() définit une matrice de transformation homogène en 2D. Son résultat est un type de donnée <transform-function>.

Note : La fonction matrix(a, b, c, d, tx, ty) est une forme abrégée de matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Dans cet article

Exemple interactif

transform: matrix(1.2, 0.2, -1, 0.9, 0, 20);

transform: matrix(0.4, 0, 0.5, 1.2, 60, 10);

transform: matrix(0, 1, 1, 0, 0, 0);

transform: matrix(0.1, 1, -0.3, 1, 0, 0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

La fonction matrix() est définie avec six valeurs. Les valeurs constantes sont implicites et ne sont pas transmises en tant que paramètresénbsp;; les autres paramètres sont décrits dans l'ordre des colonnes.

a b c d

Sont des nombres (<number>) décrivant la transformation linéaire.

tx ty

Sont des nombres (<number>) décrivant la translation à appliquer.

Cartesian coordinates on ℝ^2 Homogeneous coordinates on ℝℙ^2 Cartesian coordinates on ℝ^3 Homogeneous coordinates on ℝℙ^3

(acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix}	(actxbdty001)\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)	(actxbdty001)\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)	(ac0txbd0ty00100001)\left( \begin{array}{cccc} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)
	[a b c d tx ty]

Les valeurs représentent les fonctions suivantes : matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Syntaxe formelle

<matrix()> =
matrix( <number>#{6} )
Cette syntaxe reflète le dernier standard selon CSS Transforms Module Level 1. Tous les navigateurs n'ont peut-être pas implémenté toutes les parties. Voir la Compatibilité des navigateurs pour plus d'informations sur la prise en charge.

Exemples

HTML

html
<div>Normal</div>
<div class="changed">Modifié</div>

CSS

css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}

La proproiété transform
Propriétés individuelles de transformation :
- translate
- scale
- rotate
Le type de donnée <transform-function>
La fonction matrix3d()

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 28 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Fonction CSS matrix()

Dans cet article

Exemple interactif

Syntaxe

Valeurs

Syntaxe formelle

Exemples

HTML

CSS

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN