-
Faire son site 11 : Référence CSS - matrix3d()

matrix3d()

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.

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) : Les coefficients sont des nombres décimaux compris entre 0 et 1.


<style>
.carre {
  width: 200px;
  height: 200px;
  background-color: darkmagenta;
  color: white;
}
.carre#matrix {
  margin-left: 30px;
  background-color: orangered;
  transform: matrix3d(0.87, 0.5, 1, 0, 0.5, 0.87, 0, 0, 0.7, 0, 1, 0, 0, 0, 0.2, 1);
}
</style>
<br><br>

<div class="carre">Carré normal</div>
<div class="carre" id="matrix">Carré avec transform:</div>



Carré normal


Carré avec transform:


Mouvement généré par matrix3d()