Matrix3d() - Fonction CSS

matrix3d()

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

Description rapide
Applique une série de transformations 3D à un élément.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document: WD (document de travail)

Description de la fonction matrix3d().

La fonction matrix3d() applique une transformation composite à un élément, dans les 3 dimensions. Cette transformation peut faire intervenir des translations 3D, des rotations 3D, des changements de taille ou des inclinaisons.
matrix3d() peut donc remplacer toutes les autres fonctions de transformation 3D. Néanmoins son utilisation est plus complexe que celle des fonctions de transformation unitaire, en particulier pour déterminer la valeur des paramètres.

  • rotate3d() : Définit une rotation 3D à appliquer à un élément autour d'un axe quelconque en 3D.
  • rotateX() : Définit une rotation de l'élément autour de l'axe X (en 3D),
  • rotateY() : Définit une rotation 3D de l'élément autour de l'axe Y.
  • rotateZ() : Définit une rotation de l'élément autour de l'axe Z.
  • translate3d() : Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
  • translateZ() : Définit une translation suivant l'axe Z (perpendiculaire à l'écran).
  • scale3d() : Définit une mise à l'échelle en 3D.
  • scaleZ() : Définit une mise à l'échelle suivant l'axe Z.
  • perspective() : Définit la hauteur de l'observateur dans le cas d'une transformation 3D.

La valeur matrix3d() 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 matrix3d().

  • transform: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

    a1 à d4 sont des nombres sans unité qui décrivent l'ensemble des transformations appliquées à l'élément. Reportez vous au simulateur ci-dessous pour les équivalences avec les fonctions de transformation unitaire.

Support de la fonction matrix3d().

Les navigateurs actuels traitent correctement la fonction matrix3d(), ainsi que toutes les transformations 3D.

Colonne 1
Prise en charge générale des animations en 3D, incluant le support pour la gestion de la perspective et le support pour la propriété backface-visibility.
Colonne 2
Support de la fonction matrix3d() qui, utilisée avec la propriété transform, peut appliquer n'importe quelles transformations 3D à un élément.

Remarques :

(2) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

1
Transformations
3D
2
Fonction
matrix3d()
Estimation de la prise en charge globale.
97%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

2

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

  • Module CSS - Transformations - Niveau 2

    Niveau 2 de la spécification sur les transformations, introduisant les transformations en 3D.
    Ajout de la fonction matrix3d().
    WD
    03 Mars 2020
    Document de travail.
    CR
    PR
    REC

Voir aussi, concernant les transformations.

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

Propriétés :

backface-visibility
Visibilité de la face arrière de l'élément (pendant sa rotation).
perspective
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
perspective-origin
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
rotate
Définit une rotation à appliquer à l'élément.
scale
Définit une mise à l'échelle de l'élément (agrandissement ou réduction).
transform
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
transform-box
Définit la boîte de référence pour les transformations.
transform-origin
Définit le point d'origine pour les transformations.
transform-style
Définit comment sont rendus les éléments soumis à une transformation 3D.
translate
Applique une translation à un élément (un déplacement linéaire).

Fonctions :

matrix()
Applique une transformation composite à un élément (translations, rotations...).
perspective()
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
rotate()
Définit une rotation à appliquer à l'élément en 2D (dans le plan de l'écran).
rotate3d()
Définit une rotation 3D à appliquer à un élément autour d'un axe quelconque en 3D.
rotateX()
Définit une rotation de l'élément autour de l'axe X (en 3D),
rotateY()
Définit une rotation 3D de l'élément autour de l'axe Y.
rotateZ()
Définit une rotation de l'élément autour de l'axe Z.
scale()
Définit un agrandissement ou une réduction de l'élément.
scale3d()
Définit une mise à l'échelle en 3D.
scaleX()
Définit une mise à l'échelle suivant l'axe X.
scaleY()
Définit une mise à l'échelle suivant l'axe Y.
scaleZ()
Définit une mise à l'échelle suivant l'axe Z.
skew()
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
skewX()
Définit une inclinaison de l'élément suivant l'axe X.
skewY()
Définit une inclinaison de l'élément suivant l'axe Y.
translate()
Définit une translation (un déplacement) à un élément.
translate3d()
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
translateX()
Définit une translation suivant l'axe X (horizontalement).
translateY()
Définit une translation suivant l'axe Y (verticalement).
translateZ()
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).