> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# 前端笔记：Transfrom: Matrix() 参数配置笔记

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-07-19-70c6038d2ce2/01.jpg "“Man wearing headphones at desk with window view of sunset in background” by Simon Abrams on Unsplash")

> 最近在学一些前端知识，学到 Martrix 可以用一行来将 Transfrom 的所有属性表达出来，就打算在网上找找如何操作，发现大部分都是讲一些高等数学的计算，或者一两个属性的转换，翻了好久才找到讲4个属性同时应用在 Matrix 上的教程。鉴于花了差不多5个小时才勉强弄懂 Matrix 的属性，我决定做一篇 Matrix 参数配置笔记。

## 目标：同时将 Translate, Rotate, Skew, Scale 属性应用在 Matrix 上。

首先在 2D 动画里面 Matrix 有6个参数，先用字母代替：

transform: matrix(A, B, C, D, E, F);

然后这6个字母要排列成一个矩阵，在后面属性叠加上要相乘。

![矩阵示意图：3×3 矩阵中，第一列为 A、B、0，第二列为 C、D、0，第三列为 E、F、1，对应 CSS 写法为 transform: matrix(A, B, C, D, E, F)](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-07-19-70c6038d2ce2/02.jpg)

矩阵里第一行代表 X 轴的变化，第二行代表 Y 轴的变化，第三行代表 Z 轴的变化，因为是 2D 动画不涉及 Z 轴，所以是默认的 0 0 1。

### 1.将位移属性 Translate 应用在 Matrix 上。

Translate(X, Y) 中的 X 值和 Y 值与矩阵里的 E 和 F 相等。

假如我有属性 Translate(10px, 20px)，那么应该这样转换：

![示意图：Translate(10, 20) 转换为矩阵的过程——将 X 值 10 填入第一行第三列，Y 值 20 填入第二行第三列，其余位置保持单位矩阵默认值，最终得到 transform: matrix(1, 0, 0, 1, 10, 20)](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-07-19-70c6038d2ce2/03.jpg)

得到 transform: matrix(1, 0, 0, 1, 10, 20);

- 注意 A 和 D不能为0，没有数值时要填1。

### 2.将旋转属性 Rotate 应用在 Matrix 上。

Rotate(θ) 的角度与矩阵中 A, B, C, D 是 cosθ, sinθ, -sinθ, cosθ 的关系，计算后代入即可。

假如我有属性 Rotate(45deg)，那么应该这样转换：

![Rotate(45deg) 转换为矩阵的示意图：将 θ=45° 代入旋转矩阵公式，cos45°≈0.7，sin45°≈0.7，得到矩阵值为 [[0.7, -0.7, 0], [0.7, 0.7, 0], [0, 0, 1]]，最终转换为 transform: matrix(0.7, 0.7, -0.7, 0.7, 0, 0)](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-07-19-70c6038d2ce2/04.jpg)

得到 transform: matrix(0.7, 0.7, -0.7, 0.7, 0, 0);

### 3.将斜切属性 Skew 应用在 Matrix 上。

Skew 中的 α 和 β 值与矩阵中 B和 C 是 tanβ, tanα 的关系，计算后代入即可。

假如我有属性 Skew (30deg, 0deg)，那么应该这样转换：

![Skew(30deg, 0deg) 转换为矩阵的示意图：α=30°、β=0° 代入通用斜切矩阵（含 tanα、tanβ），计算得 tan30°≈0.57、tan0°=0，最终转换为 transform: matrix(1, 0, 0.57, 1, 0, 0)](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-07-19-70c6038d2ce2/05.jpg)

得到 transform: matrix(1, 0, 0.57, 1, 0, 0);

- 之前提到矩阵里第一行是 X 轴变换，第二行是 Y 轴变换，所以要注意 SkewX(α)对应的是矩阵第一行里的 C，而 SkewY(β) 对应的是矩阵第二行的 B。

### 4.将缩放属性 Scale 应用在 Matrix 上。

Scale(X, Y) 中的 X 值和 Y 值与矩阵里的 A 和 D 相等。

假如我有属性 Scale (1, 0.5)，那么应该这样转换：

![Scale(1, 0.5) 转换为矩阵的示意图：X 值 1 对应矩阵位置 A，Y 值 0.5 对应矩阵位置 D，得到缩放矩阵 [[1,0,0],[0,0.5,0],[0,0,1]]，对应 CSS 为 transform: matrix(1, 0, 0, 0.5, 0, 0)](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-07-19-70c6038d2ce2/06.jpg)

得到 transform: matrix(1, 0, 0, 0.5 0, 0);

### 5.同时将4个属性转换应用在 Matrix 上。

使用[矩阵计算器](https://matrixcalc.org/zh/)，按 Translate, Rotate, Skew, Scale 的顺序将这四个矩阵相乘，得到的矩阵写进 Transform: matrix() 里即可。

![矩阵乘法示意图：将 Translate(10,20)、Rotate(45°)、Skew(30°,0°)、Scale(1,0.5) 分别转为 3×3 矩阵后依序相乘，最终得到 transform: matrix(0.7, 0.35, -0.3, 0.55, 10, 20)](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-07-19-70c6038d2ce2/07.jpg)

得到 transform: matrix(0.7, 0.35, -0.3, 0.55, 10, 20);

## 参考链接

- [html - transform与Matrix矩阵 - 个人文章 - SegmentFault 思否](https://segmentfault.com/a/1190000011942578)
- [大学没学过数学也要理解 CSS3 transform 中的 matrix - 范明非的Blog](https://fanmingfei.com/posts/CSS3_Transform_Matrix_Intro.html)