--- title: matrix3d() slug: Web/CSS/transform-function/matrix3d() tags: - CSS - Reference - Transformations CSS translation_of: Web/CSS/transform-function/matrix3d() ---
{{CSSRef}}

La fonction matrix3d() décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("<transform-function>")}}.

Syntaxe

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

Valeurs

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
Des valeurs de type {{cssxref("<number>")}} qui sont les coefficients de la matrice définissant la transformation linéaire.
a4 b4 c4
Les coefficients de type {{cssxref("<number>")}} qui définissent la translation à appliquer.

Note : Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients a4, b4 et c4.

Coordonnées cartésiennes sur ℝ2 Coordonnées homogènes sur ℝℙ2 Coordonnées cartésiennes sur ℝ3 Coordonnées homogènes sur ℝℙ3
Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions. Les matrices exprimées avec des coordonnées cartésiennes ne permettent pas de représenter des transformations 3D affines car les translations ne sont pas des transformations linéaires. a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4

Exemples

Exemple simple

HTML

<p>toto</p>
<p class="transformation">truc</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation{
  transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
  background-color: blue;
}

Résultat

{{EmbedLiveSample("Exemple_simple","100%","200")}}

Translation et homothétie matricielle

HTML

<div class="foo">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
 necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>

CSS

html {
  width: 100%;
}
body {
  height: 100vh;
  /* Centering content */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;

}
.foo {
  width: 50%;
  padding: 1em;
  color: white;
  background: #ff8c66;
  border: 2px dashed black;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
   /* Setting up animation for better demonstration */
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  from {
    /*
      Identity matrix is used as basis here.
      The matrix below describes the
      following transformations:
        Translates every X point by -50px
        Translates every Y point by -100px
        Translates every Z point by 0
        Scales down by 10%
    */
    transform: matrix3d(
      1,0,0,0,
      0,1,0,0,
      0,0,1,0,
      -50,-100,0,1.1
    );

  }
  50% {
    transform: matrix3d(
      1,0,0,0,
      0,1,0,0,
      0,0,1,0,
      0,0,0,0.9
    );
  }
  to {
     transform: matrix3d(
      1,0,0,0,
      0,1,0,0,
      0,0,1,0,
      50,100,0,1.1
    )
  }
}

Résultat

{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}}

Spécifications

Spécification État Commentaires
{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}} {{Spec2("CSS Transforms 2")}} Définition initiale.

Compatibilité des navigateurs

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

Voir aussi