css3变形与动画之transform

css3变形与动画之transform:

transform :

1. 旋转 rotate(n):

旋转函数 rotate()通过指定的角度参数使元素相对原点进行旋转；

n 为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋 转；如果为负，逆时针旋转。

例：

2.扭曲 skew()

——元素倾斜显示，将对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾 斜。

3 种使用情况：

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

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

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

例：

3.缩放 scale()

——让元素根据中心原点对对象进行缩放。

3 种使用情况：

l scale(x,y) 使元素水平方向和垂直方向同时缩放；

l scaleX(x) 元素仅水平方向缩放；

l scaleY(y) 元素仅垂直方向缩放；

注意：scale()的取值默认为 1，当值设置为 0.01 到 0.99 之间的任何值，作用使 一个元素缩小；而任何大于等于 1.01 的值，作用让元素放大。

例：

4.位移 translate

——元素向指定的方向移动；

3 种情况：

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

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

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

例：

5.原点 transform-origin

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

取值：