本文主要是介绍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
所以变换矩阵为
这篇关于CSS3——CSS3矩阵matrix进行2D变换的数学原理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
