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 :

CSS - Fonction matrix3d()

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 transformation géométrique.

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.

Simulateur.

Le simulateur ci-dessous vous donne les paramètres de la fonction matrix3d() équivalents à une transformation de base (translation, rotation, etc). Il ne permet pas de cumuler plusieurs transformations, ce qui est bien entendu possible en CSS. Attention ! Dans ce cas l'ordre des transformations est important.

Équivalence avec
( x y z )
 
 
Équivalence avec
( x y )
 
 
Équivalence avec
( x y z )
 
 
 
Équivalence avec
( x y z angle )
 
 
 
transform:
       
       
       
       
Résultat

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs actuels traitent correctement la fonction matrix3d() ainsi que toutes les transformations 3D.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Transformations géométriques - 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.
  • transform : Applique une transformation géométrique.
  • transform-origin : Point d'origine pour certaines transformations.
  • transform-style : Rendu des éléments soumis à une transformation 3D.

Transformations géométriques - 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 de l'élément en 2D (dans le plan de l'écran).
  • 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.
  • scale() : Définit un agrandissement ou une réduction de l'élément.