matrix()是CSS的transform的一個基礎屬性，用它可以實現很多高級、複雜的效果，實際上transfrom的translate、rotate等都是在matrix的基礎上實現的簡化版的語法。
線性代數基礎
瞭解和使用必須熟悉線性代數的向量和矩陣知識，當初學習的線性代數的課程早就還給老師了，因爲不知道有什麼用，如果知道今天會用到，當初一定會好好學習線性代數、高數等課程。
（1）向量
向量用來描述方向和大小，一般使用笛卡爾座標系來進行向量的描述，比如向量(2, 1)和(3, 3)在座標系中表示如下：
向量的加法、減法和乘法都是將對應位置的座標進行運算：
(8, 2) + (2, 6) = (8 + 2, 2 + 6) = (10, 8)
(8, 2) - (2, 6) = (8 - 2, 2 - 6) = (6, -4)
(8, 2) * (2, 6) = (8 * 2, 2 * 6) = (16, 12)
（2）矩陣
矩陣是高等代數學中的常見工具，將數字按照長方陣列進行排列，便於進行統計分析等高等數學運算，一個2 X 3的矩陣就是說這個矩陣有2行3列
當相同規模的矩陣之間進行相加時，是對應的位置兩兩相加：
矩陣相乘時，會將前一個矩陣每行對應的位置與後一個矩陣每行對應位置分別相乘，然後將結果相加，得到的矩陣的行數等於左邊矩陣的行數，列數等於右邊矩陣的列數，例如
matrix方法
CSS3中的transfrom的matrix()方法寫法如下：
transform: matrix(a,b,c,d,e,f);
一共有六個參數，它對應了一個3*3的矩陣，書寫方向是豎向的：
在進行座標變換時（2D座標），假設目標點的座標爲(x, y)，那麼轉換公式如下：
得到的新的矩陣的第一行和第二行就是轉換後的橫縱座標。
要注意的是transfrom-origin這個屬性是變形的原點，它會影響到點的座標的計算，我們一幫都會將它設置爲0 0
例子
假設有這樣一個元素，CSS屬性如下：
#transformedObject {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 80px;
}
此時頁面效果如下：
我們對這個元素進行transform: matrix()的變換：
#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
進行matrix運算的原則就和上面提到的一樣，以(200, 80)的運算過程爲例：
應用變換後的效果如下：
matrix與其他屬性的關係
matrix是最基本的變化，它有六個參數，這六個參數給定特殊的值，就可以實現translate/rotate等特殊的效果：
以translate距離，當座標點爲(10px, 10px)，進行translate(50px 50px)的變化時，結果的座標會是(60px, 60px)
如果使用matrix()進行變化，按照上圖，需要給出的參數就是matrix(1, 0, 0, 1, 50, 50)，進行運算的過程：
1 0 50 10 1 * 10 + 0 * 10 + 50 * 1 60
0 1 50 * 10 = 0 * 10 + 1 * 10 + 50 * 1 = 60
0 0 1 1 0 * 10 + 0 * 10 + 1 * 1 1
結果是相同的。
對matrix有了瞭解之後，也就可以使用matrix同時進行復雜的、複合的變化，從而能夠實現更復雜的動畫。