html中的matrix属性,css3中transform matrix矩阵各个参数的说明

一、从最简单的情况入手

假设我们的布局和样式如下：

#wrap div{

position:absolute;width:100px;height:50px;

}

#new{

-webkit-transform-origin: left top;

-webkit-transform:matrix(1,0,0,1,20,20);

}

原来的图

我们会看到如下效果：

这种情况是最简单的变换，即位移变换translate。

假设matrix的参数分别用是：a,b,c,d,e,f

那么translate变换就等同于：matrix(1,0,0,1,e,f)

e就表示水平方向的位移，f表示竖直方向的位移。

注意：网页里面的x、y坐标都是从左上角开始计算的。

二、深入一点点

我们再来变换那么一点点，代码如下：

-webkit-transform:matrix(0.5,0,0,0.5,0,0);

你会看见如下效果

也就是说缩放scale就等同于 matrix(a,0,0,d,0,0)

到底为什么，我们马上来说

三、分析

matrix变换会将这六个参数形成一个矩阵M

a  c  e

b  d  f

0  0  1

假设原始图像上的某个点A为(x,y)

变换之后的某个点A1为(x1,y1)

在处理的时候系统会把原始图像上的每一个点生成一个矩阵P，如下

x