CSS3 matrix3d() 矩阵变换方式及应用实例

　　CSS3中的矩阵，既可制作2d效果又可制作3d效果，2d效果在前面的文章中已经介绍过，本篇主要介绍3d矩阵。2d矩阵是在一个平面内，而3d矩阵在空间中，也就是在 X、Y轴的基础上再增加Z轴。

　　2d矩阵为3×3的矩阵，取六个值，即 matrix(a, b, c, d, e, f)；而3d矩阵为4×4的矩阵，取16个值，即 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1)，它相当于2d的 matrix(a, b, c, d, e, f)，并且只是其中一种取值。

　　一、matrix3d的基本变形

　　1、matrix3d的基准数值

　　matrix3d(1, 0, 0, 0,
　　 　　 　 0, 1, 0, 0,
　　 　　 　 0, 0, 1, 0,
　　 　　 　 0, 0, 0, 1
　　 　　 　)

　　从表达式中可以看出，16个值分为四组，每组四个值，第一组值第一个为1，第二组值第二个为1，第三组值第三个为1，第四组值第四个为1，有一种序号上的递增关系。

　　2、matrix3d矩阵放大缩小

　　(x y z 1)(2, 0, 0, 0,//x方向放大2倍
　　 　　 　  0, 3, 0, 0,//y方向放大3倍
　　 　　 　  0, 0, 4, 0,//z方向放大4倍
　　 　　 　  0, 0, 0, 1
　　 　　 　 )
　　=(x*2, y*0, z*0, 1*0,
　　  x*0, y*3, z*0, 1*0,
　　  x*0, y*0, z*4, 1*0,
　　  x*0, y*0, z*0, 1*1
　　 )

　　3、matrix3d矩阵只有平移

　　matrix3d(1, 0, 0, 0,
　　 　　 　 0, 1, 0, 0,
　　 　　 　 0, 0, 1, 0,
　　 　　 　 tx,ty,tz, 1
　　 　　 　)

　　4、matrix3d矩阵只有旋转

　　1）只有X轴上的旋转，没有平移、扩大、缩小

　　matrix3d(1, 0, 0, 0,
　　 　　 　 0, Math.cos(角度值)，Math.sin(-角度值), 0,
　　 　　 　 0, Math.sin(角度值), Math.cos(角度值),  0,
　　 　　 　 0, 0, 0, 1
　　 　　 　)

　　2）只有Y轴上的旋转，没有平移、扩大、缩小

　　matrix3d(Math.cos(角度值), 0，Math.sin(角度值), 0,
　　 　　 　 0, 1, 0, 0,
　　 　　 　 Math.sin(-角度值), 0，Math.cos(角度值),0,
　　 　　 　 0, 0, 0, 1
　　 　　 　)

　　3）只有Z轴上的旋转，没有平移、扩大、缩小

　　matrix3d(Math.cos(角度值), Math.sin(-角度值), 0, 0,
　　 　　 　 Math.sin(角度值), Math.cos(角度值),  0, 0,
　　 　　 　 0, 0, 1, 0,
　　 　　 　 0, 0, 0, 1
　　 　　 　)

　　二、matrix3d矩阵应用实例

　　1、matrix3d取基准数值

　　html代码

　　<div class="matrix3d">基准数值：transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)</div>

　　CSS样式：

　　.matrix3d{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);width:230px;height:130px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

　　效果图：

　　从图中可以看出，长方形没有任何变化。

　　2、matrix3d向上旋转

　　html代码

　　<div class="matrix3d-tr">transform:matrix3d(0.826357, -0.198658, -0.506952, 0,0, 0.870835, -0.8, 0, 0.580619, 0.421769, 0.692157, 0, 0,0,0,1)</div>

　　CSS样式：

　　.matrix3d-tr{transform:matrix3d(0.826357, -0.198658, -0.506952, 0, 0, 0.870835, -0.8, 0, 0.580619, 0.421769, 0.692157, 0, 0, 0, 0, 1);width:300px;height:130px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

　　效果图：

　　从图中可以看出，长方形的左下点往下移了一点，并以左下点为旋转顶点向上旋转了一定的角度。

　　3、matrix3d向下旋转并拉伸

　　html代码

　　<div class="matrix3d-br">transform:matrix3d(0.826357, -0.198658, -0.506952, 0, 0, 0.870835, -0.8, 0, 0.580619, 0.421769, 0.692157, 0, 0,0,0,1)</div>

　　CSS样式：

　　.matrix3d-br{transform:matrix3d(3, 0.5, 0, 0, 0, 0.7, 0, 0, 0, 0, 6, 0, 30, 10, 0, 1);width:300px;height:150px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

　　效果图：

　　从图中可以看出，长方形不但沿X轴拉伸了，并且往下平移和旋转了。