CSS3新属性篇(一)：transform属性

在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()函数。

六、事例代码

height="500" width="800" scrolling="no" title="transform属性" src="//codepen.io/madman0621/embed/pOwqzL/?height=421&theme-id=light&default-tab=result&embed-version=2" allowfullscreen="true">See the Pen transform属性 by madman0621 ( @madman0621) on CodePen.

参考文献：
CSS3属性transform基本介绍
transform-skew属性方法
transform-matrix属性方法