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 :

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 de l'é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 fonction matrix3d() peut être utilisée avec :

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

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

Compatibilité et prise en charge par les navigateurs.

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

Colonne 1
Traitement général des transformations 3D.
Colonne 2
Compatibilité des navigateurs avec la fonction CSS matrix3d().
1
3D transformations
2
matrix3d()
Estimation de la prise en charge en pourcentage du parc actuel.
97%
97%

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

Les spécifications CSS éditées par le W3C sont organisées en modules. matrix3d() 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 transformation composite à un élément (translations, rotations...)
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).