為什么要寫這個(gè)呢？平時(shí)用css畫箭頭，用的是rotate方法二。一次看微信公眾號(hào)的開發(fā)樣式庫(kù)，發(fā)現(xiàn)一段代碼方法一，matrix的數(shù)字是怎么來(lái)的？到網(wǎng)上搜索，看到了這篇文章 理解CSS3 transform中的Matrix(矩陣)，感謝張?chǎng)涡瘛Ｈ缓?，就有了下面的總結(jié)

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

matrix

MDN上對(duì)matrix解釋

matrix(a, b, c, d, e, f)

引入矩陣

這一串字母是什么意思呢？轉(zhuǎn)換成矩陣就好明白了

css-transforms-matrix5.png

x，y表示轉(zhuǎn)換元素的所有坐標(biāo)（變量）

定義 e， f 為 30

平移

如果設(shè)定a, d 為1，b, c為零，x1 = e , y1 = f。相對(duì)移動(dòng)e，f的距離

transform: matrix(1, 0, 0, 1, 30, 30)
也相當(dāng)于：
transform: translate(30px, 30px)

放大

如果設(shè)定a, d 為2，b, c為零，x1 = 2x + e , y1 = 2y + f。寬、高各放大2被，再相對(duì)移動(dòng)2，f的距離

 transform: matrix(2, 0, 0, 2, 30, 30)
 也相當(dāng)于：
 transform: scale(2) translate(30px, 30px)

旋轉(zhuǎn)

旋轉(zhuǎn)相對(duì)來(lái)說(shuō)要復(fù)雜些了，用三角函數(shù)

matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)
相當(dāng)于
rotate(θdeg)

x1 = cosθx + -sinθy, y1 = sinθx + cosθy

拉伸

拉伸也比較特別

matrix(1,tan(θy),tan(θx),1,0,0)
相當(dāng)于
skew(θdeg, θdeg)

x1 = x + tan(θx)y, y = tan(θy)x + y

matrix的主要用途

一般的都平移縮放旋轉(zhuǎn)拉伸都可以用其他的方式代替，對(duì)于特殊的變換需要用到matrix，如 圖片做鏡像對(duì)稱旋轉(zhuǎn) 需要計(jì)算出來(lái) 參考文章

注意

不要忘了 transform-origin， 做變換都有相對(duì)哪個(gè)坐標(biāo)點(diǎn)來(lái)做變化，不做聲明，默認(rèn)center做為變形的原點(diǎn) 更多