CSS3变形与动画（上）

rotate（）旋转

使元素相对中心点进行旋转，如果是正值顺时针，负值逆时针

---

skew（）扭曲

以元素中心为基点

skew()具有三种情况：

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

---

scale（）缩放

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

缩放 scale 具有三种情况：

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

注意：默认值是1，小于1则缩小，大于1则放大

---

translate（）位移

translate我们分为三种情况：

1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

---

transform-origin 原点

任何一个元素都有一个中心点，变形操作都是根据中心来变形的

---

transition-property 过度动画的css属性名称

transition-duration  过度动画所花费的时间

transition-timing-function 过度动画的速度

transition-delay 延时过度

tranition简写：第一个时间的值为持续时间，第二个时间值为延迟的时间值

举个栗子： a{transition:background 0.8s(花费的事件),ease 0.3s(延迟时间)  如果有多个transition声明，则用，隔开