浅谈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)

还在整理中，待续。。。

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

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