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

matrix()

La fonction matrix() définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation.

matrix(a, b, c, d, tx, ty) : 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: 20px;
background-color: orangered;
transform: matrix(0.2, 0.75, 1, 0.3, 0.9, 0.1);
}
</style>

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


Carré normal


Carré avec transform:


Mouvement généré par matrix()