<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>