Matrix() - Fonction CSS

Description de la fonction matrix().

La fonction matrix() calcule une transformation composite à un élément. Cette transformation peut faire intervenir des translations, des rotations, des changements de taille ou des inclinaisons. matrix() peut donc remplacer toutes les autres fonctions de transformation : translate(), rotate(), scale() et skew(). Néanmoins son utilisation est plus complexe que celle des fonctions séparées, en particulier pour déterminer la valeur des paramètres.

Toutes les transformations sont sérialisées (mémorisées) sous la forme matrix().

La valeur matrix() peut être utilisée avec les propriétés suivantes :

• transform : Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).

Syntaxes de la fonction matrix()..

• transform: matrix(1, 0, 0, 1, 0, 0); a b c d e f

  Les paramètres, de a à f sont six nombres sans unités.

  1. a et d définissent les ratios de mises à l'échelle, respectivement en horizontal et en vertical.
     Entre 0 et 1, ils réduisent la taille de l'élément ; supérieurs à 1 ils l'agrandissent. Les valeurs négatives sont acceptées et provoquent un effet miroir sur l'élément.
     
     La mise à l'échelle d'un élément (effet de zoom) correspond au travail de la propriété scale() et de ses dérivées.
     
     Exemples : matrix(2,0,0,1,0,0) double la largeur de l'élément.
     matrix(-1,0,0,1,0,0) retourne l'élément horizontalement.
      
  2. b et c définissent les inclinaisons appliquées à l'élément (on peut aussi parler de cisaillements). Si ces deux valeurs sont fixées à 0 aucune déformation ne sera appliquée. Les valeurs négatives sont acceptées.
     
     Pour bien comprendre l'effet de ces deux paramètres, faites des tests avec le simulateur ci-dessous en ne précisant à chaque fois que l'une des deux valeurs. Essayez par exemple les valeurs suivantes :
     matrix(1, 0.25, 0, 1, 0, 0)
matrix(1, 0, 0.25, 1, 0, 0)
      
  3. e et f définissent une translation qui sera appliquée à l'élément, respectivement dans le sens horizontal et dans le sens vertical. Les valeurs négatives sont autorisées.
     
     Testez dans le simulateur ci-dessous les syntaxes suivantes :
     matrix(1, 0, 0, 1, 100, 0)
matrix(1, 0, 0, 1, 0, 50)
      

  Remarque : la rotation de l'élément s'effectue par une combinaison des paramètres de mises à l'échelle et d'inclinaison. Par exemple, pour tourner l'élément d'un angle a, utilisez les valeurs suivantes :
  matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)
  
  Ce qui donne pour 30° :
  matrix(0.87, 0.5, -0.5, 0.87, 0, 0)
  

Explication mathématique.

Si le calcul matriciel n'est pas votre tasse de thé, vous pouvez sans problème sauter cette explication. Pour les autres, sachez que la fonction matrix() effectue la multiplication d'une matrice 3x3 composée avec les paramètres de la fonction et d'un vecteur composé des coordonnées xy d'un point. On obtient alors un vecteur contenant les nouvelles coordonnées du point. Ce calcul est effectué pour chacun des coins de l'élément.

• x et y sont les coordonnées originales du point.
• x' et y' sont les coordonnées finales du point (après transformation).
• scx, skx, sky, scy, trx, try sont les valeurs passées en paramètres à la fonction matrix().

Le calcul matriciel donne les formules suivantes pour le calcul. Le symbole multiplié est le point, pour éviter la confusion avec x.

• x' = scx . x + sky . y + trx
• y' = skx . x + scy . y + try

Simulateur avec la fonction matrix().

Le simulateur ci-dessous vous donne les paramètres de la fonction matrix() équivalents à une transformation de base (translation, rotation, etc). Il ne permet pas de cumuler plusieurs transformations de base, ce qui est bien entendu normalement possible.

Support de la fonction matrix().

A l'heure actuelle, l'immense majorité des navigateurs traitent correctement la fonction matrix() ainsi que toutes les transformations 2D.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

1

Transformations
2D

2

Fonction
matrix()

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction matrix().

• Module CSS - Transformations - Niveau 1

  Concernant matrix(). Premier niveau de spécification concernant les transformations en 2D.
  Présentation des différentes fonctions de transformation dont matrix().
  

  28 Février 2012

  Document de travail.

  

  14 Février 2019

  Candidat à la recommandation.

  

  

• Module CSS - Transformations - Niveau 2

  Concernant matrix(). Niveau 2 de la spécification sur les transformations, introduisant les transformations en 3D.
  Ajout de la fonction matrix3d().
  Pas de changement concernant directement la fonction matrix().
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le W3C organise les spécifications CSS en modules. Le module "Module CSS - Transformations" ou Module CSS - Transformations en anglais, regroupe toutes les propriétés et fonctions concernant les transformations en CSS :

Propriétés :

Fonctions :