浅谈Matrix

前言

学习css 3D有一段时间了，其中特别有意思的就是transform属性和animate属性。今天来梳理一下transform属性中的Matrix;

transform是用来干什么的

transform官方解释是:

向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

其实用大白话来说就是

一个物体的摆放方式与摆放位置的变化

简单理解Matrix 和 Matrix3D

Matrix是transform中的一个属性，也是最重要的一个属性。

因为transform所提供的所有 2D 或 3D 的转换，都是通过 Matrix 和 Matrix3D 来实现的。

官方给我们的解释是：

matrix 定义 2D 转换，使用六个值的矩阵。

matrix3d 定义 3D 转换，使用 16 个值的 4x4 矩阵。

matrix 从字面上来看就是矩阵。 是不是让想到了高数中的矩阵了？

没错！ 它就是高数中的矩阵在CSS变换上的应用。

摸底Matrix

matrix 有六个值n, 实际上为了方便理解与阅读，通常把它记忆成这样：

matrix(n,n,n,n,n,n) => matrix(a,b,c,d,e,f);

在css中，Matrix的原始值是：

transform: matrix(1,0,0,1,0,0);
复制代码

放到数学中是这样的：

「                              「
  1, 0, 0         也就是          a, c, e 
  0, 1, 0         ======>         b, d, f
  0, 0, 1                         0, 0, 1
         」                               」
复制代码

---

说到这里，我好像忘了说它是怎么进行变换的。

我理解的是：

通过两个基向量（i向量和j向量）转换之后的的结果，而不用知道转换本身，我们就能推导出二维空间中所有向量转换之后的结果。

也就是说通过两个基础向量的变化来得到这个变换系数，然后通过这个变换系数，我们就可以推导出所有向量的变换后的值。

所以说Matrix的实质就是表示这个矩阵变换的一个矩阵。

所以，它的变换过程就是就是一个矩阵乘法。即：

如果对于矩阵和线性变换理解的不太通顺的可以看看这篇文章 矩阵与线性变换

理解abcdef

现在我们已经知道Matrix变换的实质，但是a,b,c,d,e,f分别代表什么还不知道。

根据上面的矩阵乘法得到了一组方程式就是：

x' = ax + cy + e
y' = bx + dy + f
复制代码

理解 e, f -> 平移

如果我们要x,y向右平移10个单位，那么可以推导一下：

x' = ax + cy + e + 10
复制代码

e是一个常数 所以我们想让它向右平移n个单位，只需要在e的基础上加上对应的n个单位

同理可得： 向左就是让e减去对应的n个单位

咦，我们是不是发现translateX就是这样。

正如我们发现的那样，transfrom中变换属性都是通过对 Matrix 和 Matrix3D 的一种常用的封装

---

根据我们上面的推理，translateY 也就是改变的f的值

y' = bx + dy + f ± 10
复制代码

而 translate 就是对 translateY 和 translateX 的封装

理解 a, d -> 缩放

理解平移以后缩放的理解就简单的多了！

如果我们要横向放大2倍，看我们的基础公式，也就是说x的系数 * 2

x' = ax + cy + e  --->  2ax + cy + e
复制代码

如果是纵向放大2倍：

y' = bx + dy + f  --->  bx + 2dy + f
复制代码

即：

scale(x, y) -> scaleX(x) + scaleY(y) -> matrix(x * 1, 0, 0, y * 1, 0, 0);
复制代码

理解 b,c -> 缩放(a,b,c,d)

还在整理中，待续。。。

后面的有点不知道怎么形容，先存备

还在努力的查资料，努力理解中。。。

转载于:https://juejin.im/post/5cc1602ce51d456e803516d8