Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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 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
La fonction matrix() s'utilise avec 6 valeurs. Les valeurs constantes sont implicites et ne sont pas passées comme paramètres. Les autres paramètres sont décrits dans l'ordre suivant d'abord les colonnes.
matrix(a, b, c, d, tx, ty)
Valeurs
abcd-
Les coefficients de la matrice, de type
<number>, qui définissent la transformation linéaire. txty-
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 R2 | Coordonnées homogènes sur RP2 | Coordonnées cartésiennes sur R3 | Coordonnées homogènes sur RP3 |
|---|---|---|---|
[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
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-matrix |
Compatibilité des navigateurs
Chargement...