css3变形与动画之transform

——transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋 转、缩放、移动或倾斜。

（4）位移 translate ——元素向指定的方向移动；

3 种情况：

l translate(x,y)水平方向和垂直方向同时移动；

l translateX(x)仅水平方向移动；

l translateY(y)仅垂直方向移动； 例：

（5）原点 transform-origin

 ——默认的元素的中心点居于元素 x 轴和 y 轴的 50%处；transform-origin 的作 用在于可以改变原点位置，是元素原点不在中心位置。

取值：

1. 旋转 rotate(n) 旋转函数 rotate()通过指定的角度参数使元素相对原点进行旋转；
2. n 为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋 转；如果为负，逆时针旋转。 例：
3. 

4. （2）扭曲 skew() ——元素倾斜显示，将对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾 斜。 3 种使用情况：

   l skew(x,y)元素同时在水平方向和垂直方向扭曲；

   l skewX(x)元素仅在水平方向扭曲；

   l skewY(y)元素仅在垂直方向扭曲； 例：

   

5. 缩放 scale() ——让元素根据中心原点对对象进行缩放。
6. 3 种使用情况：
7. l scale(x,y) 使元素水平方向和垂直方向同时缩放；
8. l scaleX(x) 元素仅水平方向缩放；
9. l scaleY(y) 元素仅垂直方向缩放；
10. 注意：scale()的取值默认为 1，当值设置为 0.01 到 0.99 之间的任何值，作用使 一个元素缩小；而任何大于等于 1.01 的值，作用让元素放大。 例：
11.