CSS3 转换方法（transform）变换矩阵 matrix() 应用实例

　　CSS3中，对象变换方式分为2D变换和3d变换，每种变换又有多种变换方式，其中有一种为变换矩阵matrix。它能控制一个矩阵形状、大小变来变去并能在平面上移动，具体怎么变和如何移动看下面的实例。

　　matrix()有六个取值，取值比较多，如果不了解每个值的含意，应用起来会让人感觉无从下手。仅文字说明并不好理解，所以下面将配合具体实例说明，下先看 matrix() 的语法规则。

 

　　一、matrix 语法规则

　　matrix(<number>[,<number>]{5,5})

　　从表达式可以看出，matrix 可以取多组值，至少取一个值，最多取六个值；取1到4个值为矩形，取到6个值才会出现平行四边形。表达式中的{5,5}表示[,<number>]的取值只能从1到5个值。

 

　　二、 matrix() 应用实例及参数具体含意说明

　　实例以 matrix(a,b,c,d,e,f) 为基础，改变 a,b,c,d,e,f 六个取值，对比形状的变化，从而知晓每个取的含意。

　　1、把 a 设为 0，其它全设为1，效果如下：

　　html代码：

　　<div class="matrix">transform:matrix(0,1,1,1,1,1);</div>

　　CSS样式：

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

　　从效果图中可以看出，矩阵是一个平行四边形。

 

　　2、把 a 设为 2，其它全设为1，效果如下：

 

　　矩阵向左边倾斜了，说明a有控制矩阵向左边倾斜的作用。

 

　　3、把 b 设为 3，a设置为0，其它全设为1，效果如下：

 

　　矩阵沿垂直方向拉长了，说明b有拉长矩阵的作用。

 

　　4、把 c 设为 3，a设置为0，其它全设为1，效果如下：

 

　　矩阵沿水平方向延伸了（向左边延伸），说明c有向左边延伸矩阵的作用。

 

　　5、把 e、f 都设为 20，a设置为0，其它全设为1，效果如下：

 

　　矩阵沿水平方向和垂直方向分别移动了20像素，说明e和f用于控制矩阵的水平和垂直位移。