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

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

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

一、matrix 语法规则

matrix([,]{5,5})

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

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

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

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

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

html代码：

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

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，效果如下：

transform:matrix(2,1,1,1,1,1);www.liangshunet.com

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

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

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

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

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

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

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

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

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

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