<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{
-webkit-transform : matrix(0.70, 0.70, -0.70, 0.70, 0, 0);
-moz-transform : matrix(0.70, 0.70, -0.70, 0.70, 0, 0);
-ms-transform : matrix(0.70, 0.70, -0.70, 0.70, 0, 0);
-o-transform : matrix(0.70, 0.70, -0.70, 0.70, 0, 0);
transform : matrix(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);
transform : matrix(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);
transform : matrix(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);
transform : matrix(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);
transform : matrix(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>