/ Code Css matrix() | Résultat du code Css matrix() | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la fonction CSS matrix().

<style type="text/css">
.carre{ height:100px; width:200px; border:1px solid #008a11; } 
.base{ height:100px; width:200px; border:1px dashed #999; margin-left:50px; margin-bottom:10px; }

.matrix_rotate{
  : matrix(0.70, 0.70, -0.70, 0.70, 0, 0); 
  : matrix(0.70, 0.70, -0.70, 0.70, 0, 0); 
  : matrix(0.70, 0.70, -0.70, 0.70, 0, 0); 
 -o-transform : matrix(0.70, 0.70, -0.70, 0.70, 0, 0); 
  : (0.70, 0.70, -0.70, 0.70, 0, 0); 
}

.matrix_translate{
 -webkit-transform : matrix(1, 0, 0, 1, 10, 10); 
 -moz-transform : matrix(1, 0, 0, 1, 10, 10); 
 -ms-transform : matrix(1, 0, 0, 1, 10, 10); 
 -o-transform : matrix(1, 0, 0, 1, 10, 10); 
  : (1, 0, 0, 1, 10, 10); 
}

.matrix_scale{
 -webkit-transform : matrix(0.8, 0, 0, 0.8, 0, 0); 
 -moz-transform : matrix(0.8, 0, 0, 0.8, 0, 0); 
 -ms-transform : matrix(0.8, 0, 0, 0.8, 0, 0); 
 -o-transform : matrix(0.8, 0, 0, 0.8, 0, 0); 
  : (0.8, 0, 0, 0.8, 0, 0); 
}

.matrix_skew{
 -webkit-transform : matrix(1, 0.577, 0.577, 1, 0, 0); 
 -moz-transform : matrix(1, 0.577, 0.577, 1, 0, 0); 
 -ms-transform : matrix(1, 0.577, 0.577, 1, 0, 0); 
 -o-transform : matrix(1, 0.577, 0.577, 1, 0, 0); 
  : (1, 0.577, 0.577, 1, 0, 0); 
}

.matrix_all{
 -webkit-transform : matrix(0.8, 0.577, 0.577, 0.8, 10, 10); 
 -moz-transform : matrix(0.8, 0.577, 0.577, 0.8, 10, 10); 
 -ms-transform : matrix(0.8, 0.577, 0.577, 0.8, 10, 10); 
 -o-transform : matrix(0.8, 0.577, 0.577, 0.8, 10, 10); 
  : (0.8, 0.577, 0.577, 0.8, 10, 10); 
}

</style>
<div class="base">
<div class="carre matrix_rotate">matrix type rotation</div>
</div>
<div class="base">
<div class="carre matrix_translate">matrix type translation</div>
</div>
<div class="base">
<div class="carre matrix_scale">matrix type echelle</div>
</div>
<div class="base">
<div class="carre matrix_skew">matrix type inclinaison</div>
</div>
<div class="base">
<div class="carre matrix_all">matrix type tous</div>
</div>

Interprétation du code de la fonction matrix() CSS par votre navigateur.

matrix type rotation
matrix type translation
matrix type echelle
matrix type inclinaison
matrix type tous

Interprétation normale du code de la fonction CSS matrix() (copie d'écran).

copie d'écran de l'affichage de la fonction CSS matrix()