22CSS3-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 可以设置多个变换函数来实现更多的特效。