3、CSS3新特性——transform: rotate（旋转） | scale（缩放） | translate（移动） | skew（倾斜）

一.旋转 rotate

用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

二.缩放 scale

用法：transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数；

• 一个参数时：表示水平和垂直同时缩放该倍率
• 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

三.倾斜 skew

用法：transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

• 一个参数时：表示水平方向的倾斜角度；
• 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

四.移动 translate

用法：transform: translate(45px)  或者 transform: skew(45px, 150px);

参数表示移动距离，单位px，

• 一个参数时：表示水平方向的移动距离；
• 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

五.基准点 transform-origin

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

用法：transform-origin: 10px 10px;

共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。