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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值