Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

matrix() - Fonction CSS

matrix()

Résumé des caractéristiques de la fonction matrix()

Description rapide
Applique une transformation composite à un élément (translations, rotations...)
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

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.

La fonction matrix() peut être utilisée avec :

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

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

Calcul matriciel avec la fonction matrix()

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

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

transform :
Résultat

Compatibilité et prise en charge suivant les navigateurs.

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

Colonne 1
Traitement des transformation dans le plan de l'écran (transformations 2D).
Colonne 2
Prise en charge de la fonction CSS matrix().
1
2D transformations
2
matrix()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que matrix().

Les spécifications CSS éditées par le W3C sont organisées en modules. matrix() fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Visibilité de la face arrière de l'élément (pendant sa rotation).
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
Définit une rotation de l'élément.
Définit un mise à l'échelle de l'élément (agrandissement ou réduction).
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
Définit la boîte de référence pour les transformations.
Point d'origine pour les transformations.
Rendu des éléments soumis à une transformation 3D.
Définit une translation de l'élément (un déplacement).
Définit un agrandissement ou une réduction de l'élément.

Fonctions.

Applique une série de transformations 3D à un élément.
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
Définit une rotation de l'élément en 2D (dans le plan de l'écran).
Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.
Définit une rotation de l'élément autour de l'axe X (en 3D),
Définit une rotation 3D de l'élément autour de l'axe Y.
Définit une rotation de l'élément autour de l'axe Z.
Définit un agrandissement ou une réduction de l'élément.
Définit une mise à l'échelle en 3D.
Définit une mise à l'échelle suivant l'axe X.
Définit une mise à l'échelle suivant l'axe Y.
Définit une mise à l'échelle suivant l'axe Z.
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
Définit une inclinaison de l'élément suivant l'axe X.
Définit une inclinaison de l'élément suivant l'axe Y.
Applique une translation (un déplacement ) à un élément.
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
Définit une translation suivant l'axe X (horizontalement).
Définit une translation suivant l'axe Y (verticalement).
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).