Css3动画与变形

Css3动画与变形

Css3提供了transfrom transition animation三大属性来实现我们的变形与动画效果

transfrom 是css3提供的一个变形的属性支持

1、 旋转 rotate(要旋转的度数) 要带单位deg（度数）

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

2、 扭曲skew（）函数能够让元素倾斜显示

A、 skew（x，y）使元素在水平方向和垂直方向同时扭曲

B、 skewx（x）仅使元素在水平方向扭曲

C、 skewy（y）仅使元素在垂直方向扭曲

3、 缩放 scale()函数让元素根据中心对对象进行缩放

A、 scale（x，y）使元素在水平方向和垂直方向同时缩放

（如果只写一个参数，则表示x，y两个方向缩放的倍数是一样的）

B、 scalex（x）使元素仅在水平方向缩放

C、 scaley（y）使元素仅在垂直方向缩放

（hover伪类当鼠标移上时触发某事件发生）

4、 位移translate（）函数可以使元素向指定的方向移动

A、 translate（x，y）使元素在水平方向和垂直方向同时移动

B、 translatex（x）使元素在水平方向移动

C、 translatey（y）使元素在垂直方向移动