Transform
CSS3中，屬性允許盒子模型被進行二維或三維空間坐标的變換。使用該屬性之後，元素主要可以進行以下變換：transform
- 旋轉(rotate)
- 平移(translate)
- 縮放(scale)
- 傾斜(skew)
下面的圖檔我們實作了一個旋轉和縮放的變換、然後結合animation屬性實作了一種常見的動畫效果。
項目源碼
Transform API
通過文章開頭介紹的幾種變換，我們可以簡單概括為：
| 屬性 | 描述 | demo |
|---|---|---|
| translate(x,y) | 平移變換 [注意 x,y有機關] | 測試 |
| scale(x,y) | 縮放變換 [x,y無機關] | 測試 |
| rotate(angle) | 旋轉變換[機關為弧度，deg] | 測試 |
| skew(angleX,angleY) | 拉伸變換[機關為弧度，deg] | 測試 |
| matrix(a,b,c,d,e,f) | 變換矩陣[重點] | 測試 |
基本的用法現在網上都能查詢到，這裡就不再贅述了。下面主要講一下matrix。
Matrix
中文譯為”矩陣”，在本文中可以了解為transform模闆函數。那麼矩陣到底有什麼用呢?相信大家都在大學或多或少了解過線代，我所了解的矩陣它的本質就是線性方程組，通過建立一種對應關系，得到目标結果的一種工具。
下圖是一個矩陣方程，它的作用就是将原有坐标值(X0,Y0)通過某種變換，轉換目标值(X1,Y1)。
那麼，matrix和transiform之間有什麼聯系？
通過了解到矩陣的作用，那麼我們可以想象，所謂的transform變換就是一系列的坐标值轉換。
假設有一種模闆矩陣， 它的功能就是将我們原有的坐标值，通過模闆矩陣的處理，實作平移、旋轉、縮放、拉伸等效果的轉換過程。
簡單的概括就是，我想要實作一個平移的效果。隻需要實作三個步驟即可：
- 初始化一個圖形
- 建立一個模闆矩陣
- 将模闆矩陣應用到初始化圖形中
matrix 模闆矩陣
下面是常見的幾個矩陣模闆：
| 屬性 | 描述 | demo |
|---|---|---|
| 平移 | 測試 |
| 縮放 | 測試 |
| 旋轉 | 測試 |
| 拉伸 | 測試 |
再進一步學習之前，先來回顧一些基礎線代知識：
矩陣乘法
計算規則是，第一個矩陣第一行的每個數字（a和b），各自乘以第二個矩陣第一列對應位置的數字（1和2），然後将乘積相加（ a x 1 + b x 2），得到結果矩陣左上角的那個值a+2b。CSS3（五） Transform的實作原理Transform
平移(translate)
數學意義是：
其中，(x0,y0)為起始點坐标，(x1,y1)就是我們要輸出的目标坐标值。
不難發現，e,f就是我們想要的橫縱坐标上的偏移量。
從上面的矩陣公式。我們得出，通過模闆矩陣相乘，就可以得到目标函數的坐标值。
思考題：為什麼坐标值格式會是（x,y,1），而不是(x,y)呢。這個1代表的是什麼？
縮放（scale）
有了上面的鋪墊，下面的縮放就比較簡單了。
首先想一想，縮放的原理是什麼？
縮放就是将x,y在對應橫縱軸上進行等比例的伸長或縮小。
數學意義：
a, d 就是橫縱坐标的伸縮量。
思考題：為什麼b,c會設定為0？
旋轉(rotate)
[注意] 本文僅介紹繞原點的二維旋轉。
旋轉變換就明顯與上面的兩種有質的飛躍了，因為前兩種隻是單純的線性變換，旋轉變換就加上了一種新的因素(弧度)。
數學意義：
v繞原點旋轉θ 角，得到點v’，假設 v點的坐标是(x, y) ，那麼可以推導得到 v’點的坐标（x’, y’)(設原點到v的距離是r，原點到v點的向量與x軸的夾角是ϕ )
[拓展] 旋轉矩陣的推導原理：
- 首先是(x0,y0)關于弧度的表達式：
- (x1,y1)關于弧度的表達式：（1式）
展開上面的三角函數，(2式)
- 将1式代入到2式，得
拉伸(skew)
拉伸變換也可以稱為傾斜變換或斜切變換。
數學意義：
傾斜的意義就是在于原點是一個動态值，然後再繞水準或豎直方向進行一定角度的傾斜。效果就類似于拉伸一個彈性物體。
思考題：自行推導一下。
tips：CSS3（五） Transform的實作原理Transform CSS3（五） Transform的實作原理Transform
好了，基本的圖形變換的數學原理已經講完了,以後還有後續的公式來進行擴充。謝謝~