CSS Transform的martix矩阵

最近接触都martix矩阵变换，查找了一些资料，在此记录一下

所有的tranform变换其实都是基于martix矩阵实现的，只是css给我们提供了rotate,skew,translate……等方法而已，我们先看一个图：

我们只要知道是怎么计算的就行了，假设martix(a,b,c,d,e,f),没有任何变换时：martix(1,0,0,1,0,0);

scale(缩放): x' = ax;

                  y' = dy;

rotate(旋转):假设旋转的度数为o，则martix是(cos(o),sin(o),-sin(o),cos(o),e,f);

skew(拉伸):假设x为x轴倾斜角度，y为y轴倾斜角度,martix(a,tan(y),tan(x),d,e,f);

translate:x轴偏移量就是e,

              y轴偏移量就是f

镜像变化:martix(-1,0,0,1,0,0)

 获取一个元素的martix矩阵的方法是：document.defaultView.getComputedStyle('元素名', null).transform;

转载于:https://www.cnblogs.com/lastnigtic/p/6623724.html