淺談Matrix

前言

學習css 3D有一段時間了，其中特別有意思的就是transform屬性和animate屬性。今天來梳理一下transform屬性中的Matrix;

transform是用來幹什麼的

transform官方解釋是:

向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。

其實用大白話來講就是

一個物體的擺放方式與擺放位置的變化

簡單理解Matrix 和 Matrix3D

Matrix是transform中的一個屬性，也是最重要的一個屬性。

由於transform所提供的全部 2D 或 3D 的轉換，都是經過 Matrix 和 Matrix3D 來實現的。

官方給咱們的解釋是：

matrix 定義 2D 轉換，使用六個值的矩陣。

matrix3d 定義 3D 轉換，使用 16 個值的 4x4 矩陣。

matrix 從字面上來看就是矩陣。 是否是讓想到了高數中的矩陣了？

沒錯！ 它就是高數中的矩陣在CSS變換上的應用。

摸底Matrix

matrix 有六個值n, 實際上爲了方便理解與閱讀，一般把它記憶成這樣：

matrix(n,n,n,n,n,n) => matrix(a,b,c,d,e,f);

在css中，Matrix的原始值是：

transform: matrix(1,0,0,1,0,0);
複製代碼

放到數學中是這樣的：

「                              「
  1, 0, 0         也就是          a, c, e 
  0, 1, 0         ======>         b, d, f
  0, 0, 1                         0, 0, 1
         」                               」
複製代碼

---

說到這裏，我好像忘了說它是怎麼進行變換的。

我理解的是：

經過兩個基向量（i向量和j向量）轉換以後的的結果，而不用知道轉換自己，咱們就能推導出二維空間中全部向量轉換以後的結果。

也就是說經過兩個基礎向量的變化來獲得這個變換系數，而後經過這個變換系數，咱們就能夠推導出全部向量的變換後的值。

因此說Matrix的實質就是表示這個矩陣變換的一個矩陣。

因此，它的變換過程就是就是一個矩陣乘法。即：

若是對於矩陣和線性變換理解的不太通順的能夠看看這篇文章 矩陣與線性變換

理解abcdef

如今咱們已經知道Matrix變換的實質，可是a,b,c,d,e,f分別表明什麼還不知道。

根據上面的矩陣乘法獲得了一組方程式就是：

x' = ax + cy + e y' = bx + dy + f
複製代碼

理解 e, f -> 平移

若是咱們要x,y向右平移10個單位，那麼能夠推導一下：

x' = ax + cy + e + 10 複製代碼

e是一個常數 因此咱們想讓它向右平移n個單位，只須要在e的基礎上加上對應的n個單位

同理可得： 向左就是讓e減去對應的n個單位

咦，咱們是否是發現translateX就是這樣。

正如咱們發現的那樣，transfrom中變換屬性都是經過對 Matrix 和 Matrix3D 的一種經常使用的封裝

---

根據咱們上面的推理，translateY 也就是改變的f的值

y' = bx + dy + f ± 10 複製代碼

而 translate 就是對 translateY 和 translateX 的封裝

理解 a, d -> 縮放

理解平移之後縮放的理解就簡單的多了！

若是咱們要橫向放大2倍，看咱們的基礎公式，也就是說x的係數 * 2

x' = ax + cy + e ---> 2ax + cy + e 複製代碼

若是是縱向放大2倍：

y' = bx + dy + f ---> bx + 2dy + f 複製代碼

即：

scale(x, y) -> scaleX(x) + scaleY(y) -> matrix(x * 1, 0, 0, y * 1, 0, 0);
複製代碼

理解 b,c -> 縮放(a,b,c,d)

還在整理中，待續。。。

後面的有點不知道怎麼形容，先存備

還在努力的查資料，努力理解中。。。