css Matrix属性详解

Css中的transform是我们在进行动画效果制作和图形变化常用的属性，transform中的scale支持缩放，translate支持位移，rotate支持旋转……

      但是为了方便使用，有这么一个属性，其中有6个参数，可以同时进行旋转，位移，缩放和倾斜。

      Matrix初始值为

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

      转换为数学中的矩阵为

                                         1 0 0

                                         0 1 0      

                                         0 0 1

      可以这么理解:

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

                                         a c e

                                         b d f      

                                         0 0 1

      数学的矩阵中多出来的最后3个默认为001，我们只需要操作前6个即可

      平移：

      那么如何通过这个属性来平移？

      即修改参数e和参数f来实现，e对应x轴，f对应y轴；

       这里创建的div默认在html的左上角

我们通过修改matrix的参数来实现位移：

我们修改了e和f所对应的值

图形x轴和y轴都位移了100px

效果和如下图代码相同：

缩放：

缩放只需要修改a和d的值，a对应缩放x轴,d对应缩放y轴

修改的数值即为原来的n倍

x轴不变，y轴放大到原来的两倍

旋转：

旋转要稍微复杂一点，默认的角度所对应的：

transform: matrix(cos 0,sin0,-sin0,cos0,0,0);

我们想要将这个元素顺时针旋转45度，只要算出对应的cos45，sin45即可

Sin45=0.707，cos45 = 0.707;

效果如下：