初步接觸 CSS 2D 變形
阿新 • • 發佈：2018-11-09
CSS3 2D 轉換
新的轉換屬性
下面的表格列出了所有的轉換屬性：
| 屬性 | 描述 |
|---|---|
| transform | 向元素應用 2D 或 3D 轉換 |
| transform-origin | 允許你改變被轉換元素的位置 |
2D Transform 方法
| 函式 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣 |
| translate(x,y) | 定義 2D 轉換，沿著 X 和 Y 軸移動元素 |
| translateX(n) | 定義 2D 轉換，沿著 X 軸移動元素 |
| translateY(n) | 定義 2D 轉換，沿著 Y 軸移動元素 |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度 |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度 |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度 |
| rotate(angle) | 定義 2D 旋轉，在引數中規定角度 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿著 X 和 Y 軸 |
| skewX(angle) | 定義 2D 傾斜轉換，沿著 X 軸 |
| skewY(angle) | 定義 2D 傾斜轉換，沿著 Y 軸 |
找到了一個詳解matrix的文章
理解CSS3 transform中的Matrix(矩陣)