CSS3动画——transfrom（变形）

简介：transform（变形）是CSS3制作动画的其中一个属性，主要包括以下这几种类型，分别是：rotate（旋转）、skew（扭曲）、scale（缩放）和translate（移动）。下面介绍主要用法。

1.rotate（旋转） 用法为：transform:rotate(数字+deg);rotate的参数是度数，即指定对象旋转的度数，为正数表示顺时针旋转，为负数表示逆时针旋转，transform:rotate(30deg);表示顺时针旋转30deg，旋转基点为对象中心点。

2.translate（移动） 用法为：transform:translate(x,y)，参数x,y分别表示水平和垂直两个方向分别移动的距离，为负数是表示反方向移动，若只写一个参数则表示x和y方向移动距离相同，即平移。还有translateX和translateY分别表示水平和垂直方向单向移动。移动基点为对象中心点。

3.scale（缩放） 用法为：scale(a,b)，两个参数分别表示水平和垂直方向的缩放倍数，大于0，以1为基准，小于1表示缩小，大于1表示放大，若只有一个参数则表示两个值相同。scaleX和scaleY分别表示水平和纵向的缩放倍数。缩放基点为对象中心点。

4.skew（扭曲） 用法为：skew(数字+deg,数字+deg)参数分别表示x和y方向的扭曲度数，注意与前面两个不同的是，skew的第二个参数若没设置，表示y方向的扭曲度数为0deg。skewX和skewY分别表示x和y方向的扭曲度数。扭曲基点为对象中心。

在上面的4种类型中都有强调形变的基点为对象的中心点，当然我们也可以根据想要的效果来设置对象的形变基点，通过transform-origin:(x,y)属性来设置，它的参数为坐标，其中x和y的值可以是百分值,em,px，其中x也可以是字符参数值left,center,right；y也可以是top,center,bottom。

下面是个小练习：

效果如图： 目前只是简单的动画，最终样子之后再做完善。