matrix3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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 <transform-function>.

Syntaxe

La fonction matrix3d() s'utilise avec 16 valeurs qui sont décrites dans l'ordre des colonnes.

css
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 <number> qui sont les coefficients de la matrice définissant la transformation linéaire.

a4 b4 c4

Les coefficients de type <number> qui définissent la translation à appliquer.

Note : Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs <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

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

CSS

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

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

Résultat

Translation et homothétie matricielle

HTML

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

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

Spécifications

Specification
CSS Transforms Module Level 2
# funcdef-matrix3d

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi