在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，以下将详细说明各个属性。
一、移动 translate
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);
参数表示移动距离，单位px，
- 一个参数时：表示水平方向的移动距离；
- 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
二、缩放 scale
用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数；
- 一个参数时：表示水平和垂直同时缩放该倍率
- 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
三、旋转 rotate
用法：transform: rotate(45deg);
围绕旋转中心旋转而不变形的转换，rotate()默认旋转中心为图片的中点。共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
四、倾斜 skew
用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg：
- 一个参数时：表示水平方向的倾斜角度；
- 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
关于skew倾斜角度的计算方式表面上看并不是那么直观，这里借鉴某大拿绘制的图举例说明一下：
每个图下方都有skew的参数。粗的红色的线分别是水平垂直方向上的投影，其长度与左边的未倾斜的边是相等的。两个参数所代表的角度，就是图中黑色标记的角。需要注意的是，skew中，垂直方向代表着X轴，水平方向代表着Y轴。
但是要注意的是，例如当用skew(60,60)的时候，角度的算法不是上面那样的呢，因为当两个参数的角度都大于45的时候，其实我们看到的是图形的反面，也就是长和宽交换了位置。
五、matrix()函数
用法：transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);
transform: matrix(数值a,数值b,数值c,数值d,数值e,数值f)：
- 数值a：水平方向上的尺寸缩放
- 数值b：垂直方向上的倾斜率
- 数值c：水平方向上的倾斜率
- 数值d：垂直方向上的尺寸缩放
- 数值e：水平方向上的移动距离
- 数值f：垂直方向上的移动距离
使用transform属性的matrix()函数能够综合实现旋转、缩放、倾斜的2D变形。变形内容由6个数值决定，基准数值为matrix（1,0,0,1,0,0）,也就是说这时的坐标没有变化。
如果需要3D变形，需要使用transform属性的matrix3d()函数。
六、示例代码
示例代码 by madman0621 () on .
参考文献：