[TOC] # CSS3中的矩陣 CSS3中的矩陣指的是一個方法，書寫為`matrix()`和`matrix3d()`，前者是元素2D平面的移動變換(transform)，后者則是3D變換。2D變換矩陣為3 * 3, 如上面矩陣示意圖；3D變換則是4 * 4的矩陣。 <br> <br> # 應用場景 * SVG * Canvas * transform * webgl <br> <br> # transform與坐標系統 transform 的rotate 其默認是繞著中心點旋轉的，而這個中心點就是transform-origin屬性對應的點，也是所有矩陣計算的一個重要依據點。  我們如果這樣設置： ~~~ transform-origin: 50px 70px; ~~~ 則，中心點位置有中間移到了距離左側50像素，頂部70像素的地方（參見下圖），而此時的`(30, 30)`的坐標為白點所示的位置。  <br> <br> # matrix ~~~ transform: matrix(a,b,c,d,e,f); ~~~  注意書寫方向是**豎著的**。 ## 計算 矩陣第m行與第n列交叉位置的那個值，等于第一個矩陣第m行與第二個矩陣第n列，對應位置的每個值的乘積之和。  其中，`x`,`y`表示轉換元素的所有坐標（變量）了。 `ax+cy+e`為變換后的水平坐標，`bx+dy+f`表示變換后的垂直位置。 ## transform ~~~ transform: matrix(a, b, c, d, 水平偏移距離, 垂直偏移距離); ~~~ ## scale ~~~ `matrix(sx, 0, 0, sy, 0, 0);`，等同于`scale(sx, sy)` ~~~ ## rotate 方法以及參數使用如下（假設角度為`θ`）： ~~~ matrix(cosθ,sinθ,-sinθ,cosθ,0,0) ~~~ 結合矩陣公式，就有： ~~~ x' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ y' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ ~~~ # skew 拉伸也用到了三角函數，不過是`tanθ`，而且，其至于`b, c`兩個參數相關，書寫如下（注意`y`軸傾斜角度在前）： ~~~ matrix(1,tan(θy),tan(θx),1,0,0) ~~~ 套用矩陣公式計算結果為： ~~~ x' = x+y*tan(θx)+0 = x+y*tan(θx) y' = x*tan(θy)+y+0 = x*tan(θy)+y ~~~ 對應于`skew(θx + "deg"，θy+ "deg")`這種寫法。 其中，`θx`表示`x`軸傾斜的角度，`θy`表示`y`軸，兩者并無關聯。 # 鏡像對稱 要實現API沒有提供的功能，需要使用matrix方法。 鏡像對稱即找到圖像的每個點在直線 y=kx 的對稱點。則`matrix`表示就是： ~~~ matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0) ~~~  證明： 點(x, y) 與 (x', y')所在的直線與 y = kx垂直，因為兩條垂直的線的斜率乘積為-1，因此 (y-y') / (x-x') = -1/k ① 易知 點(x, y) 與 (x', y')所在直線與直線y=kx的交點平分為線段x'y' x,y 的中點，因此 ·(y+y') / 2 = k * (x +x') /2 ② <br> 聯立①和②并整理 x, y位置，得 `x' = (1-k*k)/(k*k+1) *x + 2k/(k*k+1) *y;` `y' = 2k/(k*k+1) *x + (k*k-1)/(k*k+1) *y;` <br> 再結合矩陣公式： `x' = ax+cy+e;` `y' = bx+dy+f;` 我們就可以得到： `a = (1-k*k)/(k*k+1); ` `b = 2k/(k*k+1); ` `c = 2k/(k*k+1); ` `d = (k*k-1)/(k*k+1);` <br> 分別將a、b、c、d代入 transform: matrix(a, b, c, d, 0, 0); > 因為 transform : rotate()旋轉的角度為順時針，計算k時要取相反數 # 3D變換中的矩陣 3D變換雖然只比2D多了一個D，但是復雜程度不只多了一個。從二維到三維，是從4到9；而在矩陣里頭是從3*3變成4*4, 9到16了。 其實，本質上很多東西都與2D一致的，只是復雜度不一樣而已。這里就舉一個簡單的3D縮放變換的例子。 對于3D縮放效果，其矩陣如下：  ~~~ transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) ~~~ # 參考資料 [理解CSS3 transform中的Matrix(矩陣) 張鑫旭-鑫空間-鑫生活](https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/comment-page-1/#comments)