线性代数在图像变换transform的应用及rotate后scale图元形变

单位矩阵乘以坐标系下的任何向量，等于本身。

为什么？单位矩阵竖着看，（1，0）等于目标坐标系的单位向量<i基>，（0，1）等于目标坐标系的单位向量<j基>，目标坐标系的单位向量i、j和x、y大小相等，方向相同，所以就等于自身。

缩放：

目标坐标系的i基单位向量加倍（2,0），j基单位向量不变（0，1），在此矩阵变换基础上（x,y）变换到了(2x,y)，视觉上就是x方向放大了。

transform: scale(2,1);
transform-origin: 0 0;

旋转（坐标轴夹角保持90°）：

旋转后的新坐标系，i基单位向量（cos(a),sin(a)），j基单位向量(-sin(a),cos(a))。

transform: rotate(30deg);
transform-origin: 0 0;

平移：

水平平移200，只需要x+200；数值平移100，只需要y+100。

transform: translate(200px,100px);

---

先旋转，再缩放（会有扭曲）：

transform: scale(2,1) rotate(30deg) ; transform-origin:0 0;

结果是旋转后，执行缩放只对X轴起作用，

先缩放，再旋转：

transform:rotate(30deg) scale(2,1) ; transform-origin:0 0;

旋转后的新坐标系单位向量i基放大一倍，j基不变；