【css基础】如何理解transform的matrix()用法

实现炫酷的网页动画效果，天然少不了css3中transform的属性，此属性功能丰富且强大，好比实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，倾斜变换skew(x-angle,y-angle)等，利用这些属性能够实现基本的动画效果，若是你要实现自定义和像素级别控制的高级动画效果，咱们还须要深刻了解它的另一个属性——matrix，matrix就是矩阵的意思，听起来是否是很高级，你没听错实现更高级的效果，你须要了解“矩阵”，听到“矩阵”，是否是很惊慌，当初笔者学习线性代数时也甚是无聊，真不知道这么课有啥用，没想到这门课的在计算机应用领域应用十分普遍，好比今天说的动画效果，还有如今火爆的人工智能，真是悔不当初，当时没有好好学习这么课程。

今天笔者将从如下几个方面进行介绍：

• 向量与矩阵基础介绍
• matrix()示例
• matrix参数详细介绍

本篇文章阅读时间预计10分钟。

向量与矩阵基础介绍

关于这部份内容，有线性基础的同窗们能够忽略往下看，在这里笔者只会介绍最基础的内容，什么是向量和矩阵，以及对应的基础运算。

向量

向量被用于许多科学领域用来描述方向和大小，咱们通常用笛卡尔坐标系进行向量的描述，向量简单的来讲就是把数排成一列或一行进行展现，好比向量(2,1)和(3,3)在坐标系中表示以下：

假设咱们如今有两个向量AB(8,2)和向量AC(2,6)，咱们对其进行加、减、乘，示例以下：

向量加法

AB+AC=AD 

(8,2)+(2,6)=(8+2,2+6)=(10,8)

向量减法

AB-AC= AD 

(8,2)-(2,6)=(8-2,2-6)=(6,-4)

向量乘法

AB✖️AC = AD 

(8,2)✖️(2,6)=(8✖️2,2✖️6)=(16,12)

矩阵

简单来讲把数排列成长方形就是矩阵，咱们通常用几行几列来描述矩阵，好比 2✖️2 矩阵，2✖️3 矩阵等，乘号左边表明行数，乘号右边表明列数，以下图所示表示2✖️2 的矩阵：

矩阵相加

相同规模（行数列数都相等）的矩阵之间的加法以下图所示：

咱们能够看出是对应的位置两两相加而得。

矩阵相乘

一、矩阵与向量相乘,示意图以下：

从图能够看出矩阵每行对应的位置与向量每行对应的位置分别相乘最后将结果相加，获得结果每行对应的数字。

二、矩阵与矩阵相乘

好比 2✖️4 的矩阵与 4️✖️3 的矩阵相乘咱们获得一个 2✖️3的矩阵，以下图所示：

从图示中咱们能够看出，咱们左边矩阵的每行与右边矩阵的每列分别相乘，相乘规则如矩阵与向量相乘的规则同样，最终获得矩阵的行数等于左边矩阵的行数，列数等于右边矩阵的列数。

matrix()示例

介绍完基本向量和矩阵的知识后，咱们来看看transform的matrix()应用举例，transform:matrix(a,b,c,d,tx,ty)一共六个参数，用矩阵表示以下图所示：

注：参数书写的方向是竖着写的。

这六个参数表明什么意思，这里先不作介绍，稍后会详细介绍，咱们先从一个例子的应用来说起，如今咱们有这样一个元素，其对应的CSS属性以下：

#transformedObject {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 200px;
     height: 80px;
}复制代码

此段代码，对应的页面效果以下：

今后图咱们能够看出，此长方形的四个顶点从左上顺时针分别为：(0,0),(200,0),(200,80),(0,80),咱们对其进行transform:matrix(0.9, -0.05, -0.375, 1.375, 220, 20)的变换，css代码以下：

#transformedObject {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 200px;
     height: 80px;
     transform:  matrix(0.9, -0.05, -0.375, 1.375, 220, 20);
     transform-origin: 0 0;
}复制代码

注：transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起做用；

应用变换后的效果以下图：

这四个点的值，是怎么得出来的呢，其实有了前面的向量和矩阵知识，咱们很容易算出，matrix(0.9, -0.05, -0.375, 1.375, 220, 20)对应的矩阵以下图：

元素最初的每一个点至关一个向量，例如(200,0)可表示以下图：

变换后的四个点，实际上是matrix(0.9, -0.05, -0.375, 1.375, 220, 20)对应的矩阵与原始四个点对应的向量分别相乘而得，具体的运算过程以下图：

与(200, 80)相乘的运算过程获得(370,120)：

与(200, 0)相乘获得(400,10)：

与(0, 80)相乘获得(190,130)：

与(0,0)相乘获得(220,20)：

通过运算后，咱们最终变换后的四个点: (220,20)，(400,10)，(370,120)，(190,130)

matrix参数详细介绍

上一小节，咱们学习了如何利用向量和矩阵的知识，咱们算出了元素通过matrix()变换后的最终结果，如今咱们详细介绍下transform:matrix(a,b,c,d,tx,ty)这六个参数的意义，其实这六个参数，对应的是translate(x,y)，scale(x,y)，rotate(angle)，skew(x-angle,y-angle)这些效果,每种变换效果对应的参数不一样，以下图总结:

假如咱们对元素进行旋转15度，往右动230px, X轴方向延长1.5倍，咱们使用基本的变换属性代码下：

#o1 {
   transform-origin: 0px 0px;
   transform: rotate(15deg) translateX(230px) scaleX(1.5);
}复制代码

若是用transform:matrix()怎么实现如上的最终效果，其实咱们能够利用笔者针对transform:matrix(a,b,c,d,tx,ty)这六个参数对应的总结（如上图）,其实就是每一个变换对应的矩阵参数相乘的结果获得这6个参数值，记住必定要按照rotate，translateX，scaleX对应的顺序进行矩阵相乘，以下图所示(运算的结果笔者就不写了，留给你们练习下矩阵相乘)

小节

今天的内容就到这里，咱们了解了transform除了有translate(x,y)，scale(x,y)，rotate(angle)，skew(x-angle,y-angle)这些属性实现动画变换，还有一个高级属性matrix()，经过这个属性咱们了解其背后的数学逻辑，只有掌握这个属性后，咱们才能实现更为复杂的动画。

【ES6基础】let和做用域

【ES6基础】const介绍

【ES6基础】默认参数值

【ES6基础】展开语法(Spread syntax)

【ES6基础】解构赋值（destructuring assignment）

【ES6基础】箭头函数（Arrow functions）

【ES6基础】模板字符串（Template String）

【ES6基础】Set与WeakSet

【ES6基础】Map与WeakMap

【ES6基础】Symbol介绍：独一无二的值

【ES6基础】Object的新方法

【数据结构基础】栈简介（使用ES6）

【数据结构基础】队列简介（使用ES6）

更多精彩内容，请微信关注”前端达人”公众号！