CSS中的矩阵变换

作用：

将原来的某个点的坐标经过矩阵变换变成新的坐标

本质：

• 一个矩阵其实就是一个新的坐标系；
• 原来在笛卡尔坐标系（就是我们常见的x轴与y轴垂直的坐标系）中的点A（假设坐标为（2，1））在新的坐标系（就是用矩阵表示的）标准中，这个坐标（2，1）应该在什么位置，然后再把这个位置对应到笛卡尔坐标系中，坐标是多少

来一张图说明：

WechatIMG1.jpeg

图中信息说明：

1. xy为笛卡尔坐标系
2. x'y'是新坐标系（过会我们用矩阵表示）
3. 基于笛卡尔坐标系（默认），A点坐标为（2，1）
4. 新坐标系的x'轴的单位向量坐标是（3，1），y'轴的单位向量坐标是（1，2）
   备注：单位向量就是一个单位的长度。比如在x'y'坐标系中，（0，0）到（3，1）就相当于在笛卡尔坐标系中（0，0）到（1，0）

我们要做什么？

A点经过x'y'新坐标系变换后（也就是矩阵变换后）坐标变为什么？

解题：

WechatIMG2.jpeg

解释：

• 算式左边部分就是要变换的A点坐标
• 算式右边部分就是用矩阵表示的新坐标系
• 经过变换后，A点坐标变成了（7，4）

• 如果我要同时变换A（2，1）B（2，3）两点呢？请看下图

  
  WechatIMG3.jpeg
  

  变换后，A点坐标变成了（7，4），B点坐标变成了（9，8）

---

请注意：文中某些数学表述可能不太准确，仅供参考！