对CSS3中的transform：Matrix（）矩阵的一些理解

只要有CSS基础的人确定都知道，咱们能够经过transform中的translate,scale,rotate,skew这些方法来控制元素的平移，缩放，旋转，斜切，其实这些方法呢都是为了便于开发者使用的一个函数；可能你们有时候在用的时候也会有困惑，它们可以改变元素运动，这其中的本质是什么呢？今天咱们就来讲一说transform: matri()这个东西，若是是2D变换，括号里就是6个值得矩阵，若是是3D变换，括号里就是4*4的16值得矩阵，今天咱们就先来看看这个2D变换改变参数达到元素变换的原理。

首先带你们来了解一个概念（实在不喜欢看文字的能够略过这段）

[ 首先咱们来讲一说何为矩阵，这就要先来扯一扯线性代数的知识了，其实任何一种运动都是在一个特定的空间里进行的，这个空间有它本身特定的运动变换规则，咱们的线性空间就属于空间中的一种，线性空间中的运动咱们就称之为线性变换，在线性空间里，咱们要把一个点运动到任意的另外一个点，均可以用线性变换来表示，如何表示呢？当咱们在这个线性空间里选择了一个基(所谓基就是可以用来表示空间中全部对象的向量组)，那么咱们就能够用向量来描述空间中的任何一个对象，而后用矩阵来描述空间中的变换。而使某个对象发生运动的方法就是用表明运动的矩阵乘以表明对象的那个向量。也就是说，在线性空间选定基以后，++向量刻画对象，矩阵刻画对象的运动，用矩阵与向量的乘法施加运动++。]

• 好了，咱们要开始讲重点喽

平移

在CSS3中咱们矩阵的原始值是这样的：

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

写成咱们数学里矩阵的形式是这样的

这么看起来，咱们不太好分辨哪一个数字对应的是咱们上面写的matrix值里的哪个，那为了便于描述咱们把它写成：

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

那么写成数学矩阵式就是这样的：

根据咱们上面说的用矩阵与向量的乘法来施加运动，咱们就能够来看一下它究竟是怎么运动起来的

（怎么算的？线性代数忘光光的同窗看这里，其实只要把前面横着的a,c,e与后面竖着的x,y,1相乘再相加就ok了）
这么一来咱们能够获得一个式子就是：

x'=ax+cy+e
y'=bx+dy+f

x'和y'就是咱们变换后的水平位置坐标和垂直位置坐标，如今咱们想要把元素往x轴的正方向平移10，在y轴方向上不动,反映到方程式里，咱们要怎么来实现呢

元素往x轴的正方形平移10，在y轴方向上不动，反映到方程式里：
x'=ax+cy+e ---（x'=ax+cy+e+10)
y'=bx+dy+f （不变）

元素往y轴的正方向平移10，在x轴方向上不动，反映到方程式里：
x'=ax+cy+e （不变）
y'=bx+dy+f ---（y'=bx+dy+f+10）

元素同时往x轴正向和y轴正向移动10个单位 ：  
咱们用css矩阵来写：transform： matrix（1,0,0,1,10,10）--其余数值都不动，e和f分别加10
结论：平移只有跟e和f有关系，跟其余a,b,c,d没有关系，它们该怎么样仍是怎么样，e对应x轴的平移，f对应y轴的平移，往正方向平移多少单位就加上多少单位，反之则减去多少个单位。

缩放

平移就是x或者y加减一个常数来获得的，理解了平移以后缩放就很简单了，可不就是x和y的倍数发生了变化么，反映到式子上来那就是系数的变化，那一样道理咱们把上面的式子拿过来

x放大2倍 y不变
x'=ax+cy+e---（x'=2ax+cy+e)   就是x的系数增大2倍
y'=bx+dy+f (不变)
y放大2倍 x不变
x'=ax+cy+e (不变)
y'=bx+dy+f---(y'=bx+2dy+f)   就是y的系数增大2倍
x和y都放大2倍，就是x和y的系数都增大2倍
写成矩阵就是：
transform：matrix（2,0,0,2,0,0)
结论：缩放只有跟a和d有关系，跟其余数值都无关，a对应x轴缩放，d对应y轴缩放，缩放多少倍就乘以多少

旋转

相比于平移和缩放，旋转相对来讲要复杂点了，固然搞清楚了就没什么难的了
请看

transform：matrix（cosθ，sinθ,-sinθ,cosθ,0,0);

请看实例：

如今咱们要让这个元素往顺时针方向旋转45°（sin45°=0.707，cos45°=0.707），那么咱们给div加样式以下：

transform: matrix(0.707,0.707,-0.707,0.707,0,0);

看下咱们div如今的样子

这个div是否是就按咱们预期的同样往顺时针方向转了45°了；

接下来咱们把这个旋转放到数学里来看下
那一样的咱们把它写成数学里矩阵的形式：

一样的根据矩阵的计算公式，咱们能够获得公式：

x'=xcosθ-ysinθ;    
y'=xsinθ+ycosθ

如今咱们先把公式放在这里，咱们来看一下下图的这个正方形，从图中咱们能够知道a,b,c,d的坐标分别为：

A(0,1)   B(1,1)   C(1,0)   D(0,0)

当咱们让它旋转90°以后，那此时的cos45°就是0 sin45°都为1，分别把A,B,C,D里的x,y代入上面的公式以后咱们能够获得：

A'(0.707,0.707)   B'(1.414,0)   C'(0.707,-0.707)   D'(0,0)

如今这个正方形就变成了下图的样子，和咱们写代码达到的效果是同样的：

结论：咱们要记住初始写法是这样的 transform：matrix（cosθ，sinθ,-sinθ,cosθ,0,0);而后须要旋转多少度就计算出这个度数的cosθ，sinθ就能够达到咱们想要的效果啦