css3变形与动画之transform:
transform :
- 旋转 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 的作 用在于可以改变原点位置,是元素原点不在中心位置。
取值: