實現炫酷的網頁動畫效果，自然少不了css3中transform的屬性，此屬性功能豐富且強大，比如實現元素的位移translate(x,y)，縮放scale(x,y)，2d旋轉rotate(angle)，傾斜變換skew(x-angle,y-angle)等，利用這些屬性可以實現基本的動畫效果，如果你要實現自定義和畫素級別控制的高階動畫效果，我們還需要深入瞭解它的另外一個屬性——matrix，matrix就是矩陣的意思，聽起來是不是很高階，你沒聽錯實現更高階的效果，你需要了解“矩陣”，聽到“矩陣”，是不是很驚慌，當初筆者學習線性代數時也甚是無聊，真不知道這麼課有啥用，沒想到這門課的在計算機應用領域應用十分廣泛，比如今天說的動畫效果，還有現在火爆的人工智慧，真是悔不當初，當時沒有好好學習這麼課程。
今天筆者將從以下幾個方面進行介紹：
- 向量與矩陣基礎介紹
- matrix()示例
- matrix引數詳細介紹
本篇文章閱讀時間預計10分鐘。
向量與矩陣基礎介紹
關於這部分內容，有線性基礎的同學們可以忽略往下看，在這裡筆者只會介紹最基礎的內容，什麼是向量和矩陣，以及對應的基礎運算。
向量
向量被用於許多科學領域用來描述方向和大小，我們一般用笛卡爾座標系進行向量的描述，向量簡單的來說就是把數排成一列或一行進行展示，比如向量(2,1)和(3,3)在座標系中表示如下：
假設我們現在有兩個向量AB(8,2)和向量AC(2,6)，我們對其進行加、減、乘，示例如下：
向量加法
AB+AC=AD
(8,2)+(2,6)=(8+2,2+6)=(10,8)
向量減法
AB-AC= AD
(8,2)-(2,6)=(8-2,2-6)=(6,-4)
向量乘法
AB✖️AC = AD
(8,2)✖️(2,6)=(8✖️2,2✖️6)=(16,12)
矩陣
簡單來說把數排列成長方形就是矩陣，我們一般用幾行幾列來描述矩陣，比如 2✖️2 矩陣，2✖️3 矩陣等，乘號左邊代表行數，乘號右邊代表列數，如下圖所示表示2✖️2 的矩陣：
矩陣相加
相同規模（行數列數都相等）的矩陣之間的加法如下圖所示：
我們可以看出是對應的位置兩兩相加而得。
矩陣相乘
1、矩陣與向量相乘,示意圖如下：
從圖可以看出矩陣每行對應的位置與向量每行對應的位置分別相乘最後將結果相加，得到結果每行對應的數字。
2、矩陣與矩陣相乘
比如 2✖️4 的矩陣與 4️✖️3 的矩陣相乘我們得到一個 2✖️3的矩陣，如下圖所示：
從圖示中我們可以看出，我們左邊矩陣的每行與右邊矩陣的每列分別相乘，相乘規則如矩陣與向量相乘的規則一樣，最終得到矩陣的行數等於左邊矩陣的行數，列數等於右邊矩陣的列數。
matrix()示例
介紹完基本向量和矩陣的知識後，我們來看看transform的matrix()應用舉例，transform:matrix(a,b,c,d,tx,ty)一共六個引數，用矩陣表示如下圖所示：
注：引數書寫的方向是豎著寫的。
這六個引數代表什麼意思，這裡先不做介紹，稍後會詳細介紹，我們先從一個例子的應用來講起，現在我們有這樣一個元素，其對應的CSS屬性如下：
#transformedObject {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 80px;
}複製程式碼此段程式碼，對應的頁面效果如下：
從此圖我們可以看出，此長方形的四個頂點從左上順時針分別為：(0,0),(200,0),(200,80),(0,80),我們對其進行transform:matrix(0.9, -0.05, -0.375, 1.375, 220, 20)的變換，css程式碼如下：
#transformedObject {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 80px;
transform: matrix(0.9, -0.05, -0.375, 1.375, 220, 20);
transform-origin: 0 0;
}複製程式碼注：transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設定了transform屬性的時候起作用；
應用變換後的效果如下圖：
這四個點的值，是怎麼得出來的呢，其實有了前面的向量和矩陣知識，我們很容易算出，matrix(0.9, -0.05, -0.375, 1.375, 220, 20)對應的矩陣如下圖：
元素最初的每個點相當一個向量，例如(200,0)可表示如下圖：
變換後的四個點，其實是matrix(0.9, -0.05, -0.375, 1.375, 220, 20)對應的矩陣與原始四個點對應的向量分別相乘而得，具體的運算過程如下圖：
與(200, 80)相乘的運算過程得到(370,120)：
與(200, 0)相乘得到(400,10)：
與(0, 80)相乘得到(190,130)：
與(0,0)相乘得到(220,20)：
經過運算後，我們最終變換後的四個點: (220,20)，(400,10)，(370,120)，(190,130)
matrix引數詳細介紹
上一小節，我們學習瞭如何利用向量和矩陣的知識，我們算出了元素經過matrix()變換後的最終結果，現在我們詳細介紹下transform:matrix(a,b,c,d,tx,ty)這六個引數的意義，其實這六個引數，對應的是translate(x,y)，scale(x,y)，rotate(angle)，skew(x-angle,y-angle)這些效果,每種變換效果對應的引數不同，如下圖總結:
假如我們對元素進行旋轉15度，往右動230px, X軸方向延長1.5倍，我們使用基本的變換屬性程式碼下：
#o1 {
transform-origin: 0px 0px;
transform: rotate(15deg) translateX(230px) scaleX(1.5);
}複製程式碼如果用transform:matrix()怎麼實現如上的最終效果，其實我們可以利用筆者針對transform:matrix(a,b,c,d,tx,ty)這六個引數對應的總結（如上圖）,其實就是每個變換對應的矩陣引數相乘的結果得到這6個引數值，記住一定要按照rotate，translateX，scaleX對應的順序進行矩陣相乘，如下圖所示(運算的結果筆者就不寫了，留給大家練習下矩陣相乘)
小節
今天的內容就到這裡，我們瞭解了transform除了有translate(x,y)，scale(x,y)，rotate(angle)，skew(x-angle,y-angle)這些屬性實現動畫變換，還有一個高階屬性matrix()，通過這個屬性我們瞭解其背後的數學邏輯，只有掌握這個屬性後，我們才能實現更為複雜的動畫。
