CSS 矩阵

矩阵数学概念

在数学中，矩阵（Matrix）是⼀个按照⻓⽅阵列排列的复数或实数集合，最早来⾃于⽅程组的系数及常数所构成的⽅阵。

矩阵是⾼等代数学中的常⻅⼯具，也常⻅于统计分析等应⽤数学学科中。在物理学中，矩阵于电路学、⼒学、光学和量⼦物理中都有应⽤；计算机科学中，三维动画制作也需要⽤到矩阵。矩阵的运算是数值分析领域的重要问题。由 m × n 个数aij排成的m⾏n列的数表称为m⾏n列的矩阵，简称m × n矩阵。这m×n 个数称为矩阵A的元素，简称为元

计算规则

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

参考 百度百科 矩阵 (opens new window)

CSS 中矩阵的应用

matrix()和 matrix3d()

2D & 3D矩阵应⽤

前者是元素2D平⾯的移动变换(transform)，后者则是3D变换。2D变换矩阵为 3*3, 3D变换则是 4*4 的矩阵

transform 原理

• skew
• scale
• rotate
• translate

transform: matrix(a,b,c,d,e,f)

⽆论是旋转还是拉伸什么的，本质上都是应⽤的matrix()⽅法实现的（修改matrix()⽅法固定⼏个值），只是类似于transform:rotate这种表现形式，我们更容易理解，记忆与上⼿

transform-origin

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

总结

少点套路，多点真诚，底层就是 matrix 实现的 transform，肯定 martrix 性能更好，可以对 transform 属性进行优化

更多的应用场景

• SVG transform="matrix(a b c d e f)"
• Canvas context.transform(2,0,0,2,150,150)
• WebGL 投影，变化，视图变化
• CSS 3D matrix3d