CSS3——CSS3矩阵matrix进行2D变换的数学原理

css3的2D转换中matrix接受6个参数，却可以实现平移、旋转、放缩、斜切四种效果。它是如何做到的呢？

此处的你有两个选择
0 - 对自己有较高要求！老老实实静下心来将本文看完，
1 - 直接看总结——点我直达，只学习如何使用matrix

预备知识：矩阵相乘、三角函数，fighting！

此处附上矩阵相乘的百度百科定义

我们先将matrix接受的六个参数记为a,b,c,d,e,f，则该变换矩阵记为

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

进行相乘变换（自行百度矩阵相乘的公式）

我们得到了一个新的点（ax+cy+e,bx+dy+f,1）
怎么将这个冷冰冰的点和我们的平移旋转缩放斜切联系到一起呢？

平移

我们知道，对一个点（x,y,1）向x轴正向平移10,向y轴正向平移20，得到的点为（x+10,y+20,1），而经过矩阵变换的点为（ax+cy+e,bx+dy+f,1），对比得到a=1,c=0,e=10,b=0,d=1,f=20
所以变换矩阵为

transform: matrix(1,0,0,1,10,20); // a=1,c=0,e=10,b=0,d=1,f