简析矩阵

简析矩阵

开发工具与关键技术：DW前端

作者：盘子

撰写时间：2019年1月30日

矩阵是css3动画变形transform中的一个属性函数，矩阵可以用来表示图形的变换。Css3定义了matrix和matrix3d方法，下面将来简单分析其使用方法。源代码见下面截图：

源代码部分一目了然，来看看样式部分的代码。代码截图，如下：

matrix()： 是一个含六个参数值(m11,m12,m21,m22,dx,dy) 是一个基于矩阵变换的函数，前面的4个参数将组成变形矩阵,后面的dx,dy主要是指在坐标轴上的一个偏移量。主要是

用来指定一个2D变换，相当于直接应用一个[m11
m12 m21 m22 dx dy]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵。

把六个参数值对应到矩阵，每个参数都有相对应的坐标。矩阵变换后得到的新顶点是由这六个参数值的对应矩阵和所用图形的顶点相乘而得。如下面效果图所展示得图形变换过程，图形由圆形变为椭圆再到条形，且变化过程中其位移也发生改变。如果以效果图圆的圆心为原点即顶点，再把图形整体沿着x轴、y轴各平移100px，平移后新的顶点位置就应该是圆心坐标（x+100，y+100）。

用法：transform:matrix(1,74,0,3,20,40);效果如下面的效果图所示

matrix()的3D变换有16个参数值，用法如下：

matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15);

这十六个参数也有对应的矩阵坐标