为什么要写这个呢？平时用css画箭头，用的是rotate方法二。一次看微信公众号的开发样式库，发现一段代码方法一，matrix的数字是怎么来的？到网上搜索，看到了这篇文章 理解CSS3 transform中的Matrix(矩阵)，感谢张鑫旭。然后，就有了下面的总结

方法一： transform: rotate(45deg);
方法二：transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

matrix

MDN上对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做为变形的原点 更多