【css基礎】如何理解transform的matrix()用法

實現炫酷的網頁動畫效果，天然少不了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 的矩陣：

矩陣相加

相同規模（行數列數都相等）的矩陣之間的加法以下圖所示：

咱們能夠看出是對應的位置兩兩相加而得。

矩陣相乘

一、矩陣與向量相乘,示意圖以下：

從圖能夠看出矩陣每行對應的位置與向量每行對應的位置分別相乘最後將結果相加，獲得結果每行對應的數字。

二、矩陣與矩陣相乘

好比 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()，經過這個屬性咱們瞭解其背後的數學邏輯，只有掌握這個屬性後，咱們才能實現更爲複雜的動畫。

【ES6基礎】let和做用域

【ES6基礎】const介紹

【ES6基礎】默認參數值

【ES6基礎】展開語法(Spread syntax)

【ES6基礎】解構賦值（destructuring assignment）

【ES6基礎】箭頭函數（Arrow functions）

【ES6基礎】模板字符串（Template String）

【ES6基礎】Set與WeakSet

【ES6基礎】Map與WeakMap

【ES6基礎】Symbol介紹：獨一無二的值

【ES6基礎】Object的新方法

【數據結構基礎】棧簡介（使用ES6）

【數據結構基礎】隊列簡介（使用ES6）

更多精彩內容，請微信關注」前端達人」公衆號！