CSS3matrix-matrix3d介绍
上⼀篇介绍了transform变形属性，其实⼀系列变形函数的本质都是matrix矩阵运算，本篇就来看看究竟是怎么运算后产⽣各种变形效果的。
先看看容易点的2D矩阵matrix，共有6个参数matrix(a, b, c, d, e, f)，各参数在矩阵中的位置：
元素原本的XY轴坐标经matrix变换后，新坐标为x1，y1。计算公式如下：
这是线性代数⾥最简单的内容了，虽然难⼀点的线性代数的知识全还给⽼师了，但这点应该不难理解，横⾏乘竖⾏。
以translate位移举例。想将其在XY轴上相对原点位置位移，很简单translate(tx, ty)；即可。你也可以⽤
matrix实现。原点坐标为xy，经translate位移后新坐标需要为x1=x+tx，y1=y+ty。根据上图，等价于matrix(1,0,0,1,tx,ty);。例如translate(50px, 100px)；等价于matrix(1,0,0,1,50,100);
同理scale缩放后新坐标需要为x1=x*sx，y1=y*sy，因此等价于matrix(sx,0,0,sy,0,0);。例如scale(0.5, 1.5)；等价于matrix(0.5,0,0,1.5,0,0);
位移和缩放⽐较简单，rotate旋转将元素旋转⼀个⾓度稍微复杂点。旋转后各像素的新坐标需要为x1=cos(a)*x-
sin(a)*y，y1=sin(a)*x+cos(a)*y，因此等价于matrix(cos(a),sin(a),-sin(a),cos(a),0,0);。例如rotate(45deg)；等价于matrix(0.53,0.85,-
0.85,0.53,0,0);（cos(45)=0.53，sin(45)=0.85）
skew扭曲后各像素新坐标需要为x1=x+tan(ax)*y，y1=tan(ay)*x+y，因此等价于matrix(1,tan(ay),tan(ax),1,0,0);。例如skew(45deg)；等价
于matrix(1, 0, 1, 1, 0, 0);（tan(45)=1）
弄了个表：
transform matrix
rotate属性translate(tx, ty);matrix(1, 0, 0, 1, tx, ty);
scale(sx, sy);matrix(sx, 0, 0, sy, 0, 0);
rotate(a);matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);
skew(ax, ay);matrix(1, tan(ay), tan(ax), 1, 0, 0);
translate3d(tx,ty,tz)等价于matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1)
scale3d(sx,sy,sz)等价于matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)
rotate3d(x,y,z,a)真是得搬出⾼中数学书好好复习⼀下了，第四个参数alpha⽤于sc和sq中
等价于…你⾃⼰从上到下，从左到右依次将参数搬⼊matrix3d中吧。当然除⾮是库函数需要，否则我严重怀疑是否会有⼈放着rotate3d不⽤，偏要去挑战⽤matrix3d模拟rotate3d。
总结
你可能会疑惑，谁会放着现成的transform内置函数不⽤，去⽤matrix/matrix3d？除⾮你故意不想让他⼈看懂代码，你可以将
transform: rotate(15deg) translate(230) scale(1.5,2.6) skew(220deg,-150deg) translate(230px);
写成
transform: matrix(1.06,1.84,0.54,2.8,466px,482px);
保证你的代码谁也看不懂谁也改不了，知识产权那是妥妥的，公司辞退谁都不会辞退到你。但恕我才疏学浅，除了满⾜个⼈好奇⼼，体会到⼀点智⼒上的优越感外，实际项⽬中似乎确实没什么卵⽤…本篇您就当看个乐呵。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。