CSS3矩阵变换 - 码农教程

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 #div1{
 width:100px;height: 100px;
 background: red;
 transition: 1s;
 }
  #div1:hover{
 /*-webkit-transform: matrix(0.5,0.38,-0.38,2,0,0);*/
 } 
 /*matrix(0.5,0.38,-0.38,2,0,0);
 默认六个参数matrix(1,0,0,1,0,0);
 在ie下：progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,
 M21=0,M22=1,SizingMethodd='auto expend')
 * matrix(a,b,c,d,0,0);
 * 在ie下六个参数：M11=a;M12=c;m21=b,M22=d*/
 </style>
 </head>
 <body>
 <div id="div1"></div>
 </body>
</html>
<script>
window.onload=function(){
 var obox=document.getElementById("div1");
 obox.onclick=function(){
 //matrix(a,b,c,d,x轴的位移px,y轴的位移px)
 //obox.style.webkitTransform="matrix(1,0,0,1,20,20)"
//  matrix(A:x轴的缩放0-1默认为1,
// B:y轴的斜切度数的正切c=Math.tan(xdeg/180*Math.PI),
// C:x轴的斜切度数的正切d=Math.tan(xdeg/180*Math.PI),
// D:y轴的缩放默认为1,
// E:x轴的位移px默认为0,
// F:y轴的位移px默认为0)
 //obox.style.webkitTransform="matrix(0.3,0,0,0.3,20,20)"
 //obox.style.webkitTransform="matrix(0.3,0.3,0,0.3,20,20)"
 //如果要利用矩阵进行旋转，则同时改变四个参数，
// a:Math.cos(x/180*Math.PI);
// b:Math.sin(x/180*Math.PI);
// c:-Math.sin(x/180*Math.PI);c=-b;
// d:Math.cos(x/180*Math.PI);d=a;
obox.style.webkitTransform="matrix(0.87,0.5,-0.5,0.87,20,20)"
 }
}
</script>