CSS3 2D 变换

　　CSS2D transform 表示2D变换，目前获得了各主流浏览器的支持，是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，可以取代大量之前只能靠Flash才可以实现的效果。

一、定义移动（translate）

　　translate() 函数能够重新定位元素的坐标，包含两个参数，分别用来定义 x轴和 y轴坐标。

　　语法格式：

transform:translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） // x、y可为负值 

transform:translateX(x)仅水平方向移动（X轴移动） 

transform:translateY(Y)仅垂直方向移动（Y轴移动） 

　　Tips：如果是用百分比来表示，则参考的是自己本身。例：transform:translate(-50%,-50%);  /* 走的自己盒子的一半 */

二、定义缩放

　　scale() 函数能够缩放元素大小，包含两个参数，分别用来定义宽和高缩放比例。

　　语法格式：

transform:scale(<number>[,<number>]) 

• • 参数可以是正数、负数和小数；默认值为1；
  • 　  如果是两个参数，分别对应着宽度和高度，如果有一个参数，则另一个参数同第一个，如果想另外一个不变化，必须写上 1（不缩放）。
  • 正数表示基于指定的宽度和高度将放大元素，
  • 负数值不会缩小元素，而是翻转元素，然后再缩放元素。（即 负号只是翻转元素，具体的缩放要取决于后面数值是1还是小于1）
  • 使用小于 1 的小数可以缩小元素，即缩小到原来的多少倍。

三、定义旋转

　　rotate() 函数能够旋转指定的元素对象，主要在二维空间进行操作，接收一个角度参数值，用来指定旋转的幅度。

　　语法格式：

transform:rotate(45deg);       // 注意单位是 deg 度数

　　Tips：正值为顺时针，负值为逆时针；

四、定义变换原点

　　CSS 变换的原点默认为对象的中心点，如果要改变这个中心点，可以使用 transform-origin 属性进行定义。

　　语法格式：

transform-origin:属性值1，属性值2;

• • 　　属性值初始值为 50%，50%，即元素中心的，适用于块级元素和行内元素；
  • 属性值可以是 left、right、center、bottom、top 等描述性关键字；
  • 也可以是百分比、em、px 等具体的值；

五、定义倾斜

　　skew() 函数能够让元素倾斜显示，该函数包含两个参数值，分别用来定义 x 轴 和 y 轴坐标倾斜的角度。

　　语法格式：

transform:skew(角度值1,角度值1);   // 注意单位是 deg 度数

• • 　　 第一个参数表示相对于 x  轴进行倾斜，第二个参数表示相对于 y 轴进行倾斜；
  • 如果省略了第2个参数，则第2个参数默认值为 0 ；

六、定义矩阵

　　matix() 是矩阵函数，调用该函数可以非常灵活的实现各种变换效果。

　　语法格式：

matrix(<number>,<number>,<number>,<number>,<number>,<number>,) 

• • 第1个参数控制 x 轴缩放；
  • 第2个参数控制 x 轴倾斜；
  • 第3个参数控制 y 轴倾斜；
  • 第4个参数控制 y 轴缩放；
  • 第5个参数控制 x 轴移动；
  • 第6个参数控制 y 轴移动；

Tips：transform 可以设置多个变换函数来实现更多的特效。