Fonction CSS `matrix3d()`

Baseline

Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Voir la compatibilit complte
En savoir plus

La fonction CSS matrix3d() dfinit une transformation 3D sous forme de matrice homogne 4x4. Son rsultat est un type de donne <transform-function>.

Exemple interactif

transform: matrix3d(
  -0.6,
  1.34788,
  0,
  0,
  -2.34788,
  -0.6,
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  10,
  1
);

transform: matrix3d(
  0.5,
  0,
  -0.866025,
  0,
  0.595877,
  1.2,
  -1.03209,
  0,
  0.866025,
  0,
  0.5,
  0,
  25.9808,
  0,
  15,
  1
);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntaxe

css

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

Valeurs

La fonction matrix3d() est dfinie avec 16 valeurs. Les valeurs sont donnes selon l'ordre colonne principale.

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3: Nombres (<number>) dcrivant la transformation linaire.
a4 b4 c4 d4: Nombres (<number>) dcrivant l dplacement appliquer.

Coordonnes cartsiennes sur ^2 (angl.)	Coordonnes homognes sur ^2	Coordonnes cartsiennes sur ^3 (angl.)	Coordonnes homognes sur ^3 (angl.)
Cette transformation s'applique l'espace 3D et ne peut pas tre reprsente sur le plan.		Une affinit mathmatique 3D gnrique ne peut pas tre reprsente par une matrice en coordonnes cartsiennes, car les translations ne sont pas des transformations linaires.	(a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4)\left( \begin{array}{cccc} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \\ \end{array} \right)

Syntaxe formelle

<matrix3d()> = 
  matrix3d( <number>#{16} )

Cette syntaxe reflte le dernier standard selon CSS Transforms Module Level 2. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Exemple d'crasement de cube

L'exemple suivant montre un cube 3D cr partir d'lments DOM et de transformations, qui peut tre survol ou slectionn pour appliquer une transformation matrix3d().

HTML

html

<section id="example-element" tabindex="0">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

CSS

css

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}

#example-element:hover,
#example-element:focus {
  transform: rotate3d(1, 1, 1, 30deg)
    matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

Rsultat

Exemple de dplacement et de mise l'chelle de matrice

Autre exemple avec matrix3d(), qui met en uvre une animation combine de dplacement et de mise l'chelle.

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;
  /* Centre le contenu */
  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;
  /* Configuration de l'animation pour une meilleure dmonstration */
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  0% {
    /*
      La matrice identit sert ici de base.
      La matrice ci-dessous dcrit les
      transformations suivantes :
        Dplacement de chaque point X de -50 px
        Dplacement de chaque point Y de -100 px
        Dplacement de chaque point Z de 0
        Rduction d'chelle de 10 %
    */
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  100% {
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      50, 100, 0, 1.1
    )
  }
}