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

还在整理中，待续。。。

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

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

浅谈Matrix

正文