開篇
實現炫酷的網頁動畫效果，自然少不了css3中transform的屬性，此屬性功能豐富且強大，比如實現元素的位移translate(x,y)，縮放scale(x,y)，2d旋轉rotate(angle)，傾斜變換skew(x-angle,y-angle)等，利用這些屬性可以實現基本的動畫效果，如果你要實現自定義和像素級別控制的高級動畫效果，我們還需要深入了解它的另外一個屬性——matrix，matrix就是矩陣的意思，聽起來是不是很高級，你沒聽錯實現更高級的效果，你需要了解「矩陣」，聽到「矩陣」，是不是很驚慌，當初筆者學習線性代數時也甚是無聊，真不知道這門課有啥用，沒想到這門課在計算機領域應用十分廣泛，比如本文說的動畫效果，還有現在火爆的人工智慧，真是悔不當初，當時沒有好好學習這麼課程。
本篇文章，筆者將從以下幾個方面進行介紹:
向量與矩陣基礎知識一個matrix()的例子matrix()參數詳細介紹
本篇文章閱讀時間預計6分鐘。
01
向量與矩陣基礎知識
關於這部分內容，有線性代數基礎的同學們可以忽略本部分內容，在這裡筆者只會介紹最基礎的內容，主要涉及什麼是向量和矩陣，以及對應的基礎運算。
向量
向量被用於許多科學領域用來描述方向和大小，我們一般用笛卡爾坐標系進行向量的描述，向量簡單的來說就是把數排成一列或一行進行展示，比如向量(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)
向量乘法：
ABAC = AD(8,2)(2,6)=(82,26)=(16,12)
從上述例子我們可以看出，向量的運算即為每個向量對應的位置進行兩兩相加、兩兩相減或兩兩相乘。
矩陣
簡單來說把數排列成長方形就是矩陣，我們一般用幾行幾列來描述矩陣，比如 22 矩陣，23 矩陣等，乘號左邊代表行數，乘號右邊代表列數，如下圖所示表示22 的矩陣：
矩陣相加：
相同規模（行數列數都相等）的矩陣之間的加法如下圖所示：
我們可以看出是對應的位置兩兩相加而得。
矩陣相乘
1、矩陣與向量相乘,示意圖如下：
從圖可以看出矩陣與向量相乘結果為向量，矩陣每行的數字分別與向量每行對應的位置分別相乘最後將結果相加，得到結果向量。
2、矩陣與矩陣相乘
比如 24 的矩陣與 43 的矩陣相乘我們得到一個 23 的矩陣，如下圖所示：
從圖示中我們可以看出，我們左邊矩陣的每行與右邊矩陣的每列分別相乘，相乘規則如矩陣與向量相乘的規則一樣，最終得到矩陣的行數等於左邊矩陣的行數，列數等於右邊矩陣的列數。
02
一個matrix()的例子
介紹完基本向量和矩陣的知識後，我們來看看一個matrix()的例子，transform:matrix(a,b,c,d,ex,fy)一共六個參數，用矩陣表示如下圖所示：
註：參數書寫的方向是豎著寫的。
這六個參數代表什麼意思，這裡先不做介紹，稍後會詳細介紹，現在我們有這樣一個元素，其對應的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-origin屬性的時候起作用。
應用這個屬性後的效果如下圖：
好奇的你，你一定困惑這四個點的值是怎麼得出來的呢，其實有了前面的向量和矩陣知識，我們很容易算出，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)
03
matrix參數詳細介紹
通過前面的學習，我們學到了向量和矩陣的基礎知識，一個matrix()變換的例子，我們通過矩陣運算算出了變換後的結果。接下來我們一起學習下transform:matrix(a,b,c,d,tx,ty)這六個參數代表的意義，其實這六個參數，對應的是translate(x,y)，scale(x,y)，rotate(angle)，skew(x-angle,y-angle)這些效果,每種變換效果對應的參數不同，如下圖總結:
現在有這個需求，我們對元素進行順時針旋轉15度，X軸方向右移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這個高級屬性——matrix()矩陣屬性，通過這個屬性我們了解其背後的數學邏輯，只有理解掌握這個屬性後，我們才能實現更為複雜的動畫效果。