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.

Voir la compatibilit complte
En savoir plus

La fonction CSS matrix() dfinit une matrice de transformation homogne en 2D. Son rsultat est un type de donne <transform-function>.

Note : La fonction matrix(a, b, c, d, tx, ty) est une forme abrge 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 dfinie avec six valeurs. Les valeurs constantes sont implicites et ne sont pas transmises en tant que paramtresnbsp;; les autres paramtres sont dcrits dans l'ordre des colonnes.

a b c d: Sont des nombres (<number>) dcrivant la transformation linaire.
tx ty: Sont des nombres (<number>) dcrivant 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)
(acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix}	`[a b c d tx ty]`

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

Syntaxe formelle

<matrix()> = 
  matrix( <number>#{6} )

Cette syntaxe reflte le dernier standard selon CSS Transforms Module Level 1. Tous les navigateurs n'ont peut-tre pas implment 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;
}

Rsultat

Spcifications

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

Compatibilit des navigateurs

Voir aussi

La proproit transform
Proprits individuelles de transformation :
Le type de donne <transform-function>
La fonction matrix3d()

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 28 avr. 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu

Fonction CSS matrix()

Dans cet article

Aider amliorer MDN

Fonction CSS `matrix()`