Css 矩阵——Matrix

矩阵的数学概念

在数学中,矩阵(Matrix)是⼀个按照长⽅阵列排列的复数或实数集合,最早来⾃于⽅程组的系数及常数所构成的⽅阵。矩阵是⾼等代数学中的常见⼯具,也常见于统计分析等应⽤数学学科中。在物理学中,矩阵于电路学、⼒学、光学和量⼦物理中都有应⽤;计算机科学中,三维动画制作也需要⽤到矩阵。矩阵的运算是数值分析领域的重要问题。将矩阵分解为简单矩阵的组合可以在理论和实际应⽤上简化矩阵的运算。由 m × n 个数aij排成的m⾏n列的数表称为m⾏n列的矩阵,简称m × n矩阵

image

矩阵乘法规则

image

矩阵第m⾏与第n列交叉位置的那个值,等于第⼀个矩阵第m⾏与第⼆个矩阵第n列,对应位置的每个值的乘积之和。线性代数是向量计算的基础,很多重要的数学模型都要⽤到向量计算。矩阵的本质就是线性⽅程式,两者是⼀⼀对应关系。如果从线下⽅程式的⾓度,理解矩阵乘法毫⽆难度。

Css中矩阵应用

Css中与矩阵相关的api主要是 matrix 和 matrix3d ,matrix 跟元素2d平⾯的移动变换(transform)相关,是 3 * 3 的矩阵,matrix3d是元素3d变换,是 4 * 4 的矩阵

transform原理

transform 中有4种图形变化:

  • skew: 拉伸
  • scale: 缩放
  • rotate: 旋转
  • translate: 位移

上面4种图形变化,我们都可以用 transform:matrix(a, b, c, d, e, f) 来表示。⽆论是旋转还是拉伸,本质上都是应⽤ matrix() ⽅法实现的(修改 matrix()⽅法固定⼏个值), 因此如果直接使用 matrix ,性能会更高,只是类似于 transform:rotate 这种表现形式,我们更容易理解,记忆与上⼿

transform-origin:通过transform-origin属性进⾏设置的时候,矩阵相关计算也随之发⽣改变。实际图形效果上就是,旋转拉伸的中⼼点变了。

接下来分析 matrix 的相关推导。

二维平面上一个点记为(x,y),为了与向量区分开,我们使用数字1代表点,0代表向量,则二维平面上一个点应记为(x,y,1),为了使该点经过变换后依旧为(x,y,1)的形式,矩阵可以改为:

image

进行相乘变换

image

transform:matrix(1, 0, 0, 1, 30, 30)

x的坐标就是ax+cy+e = 1 *0 + 0 *0 + 30 = 30

y的坐标就是bx+dy+f = 0 * 0 + 1 * 0 + 30 = 30

transform: matrix(x, x, x, x, ⽔平偏移位移,垂直偏移位移)

translate

1
2
3
4
5
6
7
matrix的(ax + cy + e, bx + dy + f, 1) 

对于⼀个点(x, y, 1)平移(30px, 30px)后点为(x + 30px, y + 30px, 1)

matrix表⽰(1, 0, 0, 1, 30, 30)

transform: matrix(1,0,0,1,e,f) == transform: translate(e,f);

scale

1
2
3
4
5
6
7
matrix的(ax + cy + e, bx + dy + f, 1) 

对于⼀个点(x, y, 1)放⼤两倍(2x, 2y, 1)

matrix(2, 0, 0, 2, 0, 0)

transform: matrix(a,0,0,d,0,0) == transform: scale(a,d)

rotate

1
2
3
⼀个点(x, y, 1)旋转θ°后得到的点为 (xcosθ-ysinθ,xsinθ+ycosθ, 1
matrix(ax+cy+e, bx+dy+f, 1)
matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0);

skew

1
2
3
4
5
6
X轴拉伸(x + ytanθ, y, 1) 
matrix(ax + cy + e, bx + dy + f, 1);
X轴拉伸matrix(1, 0, tanθ, 1, 0, 0)
Y轴拉伸(x, xtanα + y)
Y轴拉伸martix(1, tanα, 0, 1, 0, 0)
综合matrix(1, tanα, tanθ, 1, 0, 0)