为什么要写这个呢？平时用css画箭头，用的是rotate方法二。一次看微信公众号的开发样式库，发现一段代码方法一，matrix的数字是怎么来的？到网上搜索，看到了这篇文章 理解CSS3 transform中的Matrix(矩阵)，感谢张鑫旭。然后，就有了下面的总结
方法一： transform: rotate(45deg); 方法二：transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
matrix
matrix(a, b, c, d, e, f)
引入矩阵
这一串字母是什么意思呢？转换成矩阵就好明白了
css-transforms-matrix5.png
x，y表示转换元素的所有坐标（变量）
定义 e， f 为 30
平移
如果设定a, d 为1，b, c为零，x1 = e , y1 = f。相对移动e，f的距离
transform: matrix(1, 0, 0, 1, 30, 30) 也相当于： transform: translate(30px, 30px)
放大
如果设定a, d 为2，b, c为零，x1 = 2x + e , y1 = 2y + f。宽、高各放大2被，再相对移动2，f的距离
transform: matrix(2, 0, 0, 2, 30, 30) 也相当于： transform: scale(2) translate(30px, 30px)
旋转
旋转相对来说要复杂些了，用三角函数
matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) 相当于 rotate(θdeg)x1 = cosθx + -sinθy, y1 = sinθx + cosθy
拉伸
拉伸也比较特别
matrix(1,tan(θy),tan(θx),1,0,0) 相当于 skew(θdeg, θdeg)x1 = x + tan(θx)y, y = tan(θy)x + y
matrix的主要用途
一般的都平移缩放旋转拉伸都可以用其他的方式代替，对于特殊的变换需要用到matrix，如 图片做镜像对称旋转 需要计算出来 参考文章
注意
不要忘了 transform-origin， 做变换都有相对哪个坐标点来做变化，不做声明，默认center做为变形的原点 更多
