为了弄清楚这个transform花了几个早上和周末重新学习了一下线性代数， 三角函数。。
废话不多说直接开始。
计算机图形的展示的话我们都可以用一个矩阵来表示也就是[1 0 0,0 1 0,0 0 1][x y 1] = [x y 1]，当图形没有发生任何变动的时候由原始的[1 0 0,0 1 0,0 0 1]矩阵去计算图形的位置，而当我们需要对图形进行变动的话，就要修改这个计算矩阵。
先从平移开始，平移还是比较简单的，假设图形点位的坐标为(x,y),目标点位的坐标就可以用(x+rx,y+ry)表示，rx和ry为移动的距离，那么矩阵便为[1 0 rx,0 1 ry,0 0 1][x y 1] = [x+rx y+ry 1]，即为这个图形的位置，所以很容易的我们要对这个图形进行平移操作也就是x轴和y轴方向进行移动。
然后是缩放，缩放也比较容易，假设图形点位的坐标为(x,y),目标点位的坐标就可以用(xsx,ysy)表示，sx和sy为移动的距离那么矩阵便为[sx 0 0,0 sy 0,0 0 1][x y 1] = [xsx ysy 1]。
旋转的计算方法比较复杂，一开始尝试用正弦和余弦定理去列等式解决问题，但想复杂了，只要简单的用正弦角和余弦角的计算公式即可解决，手写了一下。
解释一下，目标点为B点(a,b)，已知旋转角α，A点坐标(x,y)，用x,y,α来表示a和b，这里假设了原点到B点的连线与x轴的夹角为β角。
我们页面以左上角为原点，x轴向右，y轴向下，所以跟计算的会有符号上的差异不过具体算法还是相同的。
最后得到的点位为(xcosα-ysinα,xsinα+ycosα)，矩阵为[cosα -sinα 0,sinα cosα 0,0 0 1][x y 1] = [xcosα-ysinα xsinα+ycosα 1]，这也就解释其实我们在transform:rotate()这里的参数即为α，并且是顺时针的而不是逆时针的原因。
我们css中transform还有个方法matrix，这个方法提供了6个参数，也就是矩阵中的前6位，所以这就是为什么matrix的默认参数为(1,0,0,0,1,0)，这就是原始的计算矩阵的前6位，用matrix可以直接通过修改矩阵中的值来计算图形的变化，只是这个方法会比较难计算，但比如只是平移的话，只要给参数(1,0,rx,0,1,ry)即可。