matrix()

Baseline Widely available

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).

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>

Syntaxe

css

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

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
$\begin{pmatrix} a & c \\ b & d \end{pmatrix}$	$\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)$	$\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)$	$\left( \begin{array}{cccc} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)$
$\begin{pmatrix} a & c \\ b & d \end{pmatrix}$	`[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} )

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;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi

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

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨25 nov. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content