transition过渡、变形

1、 transition过渡

transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;

transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms

transition-delay : 定义过渡效果何时开始。
2s : 延迟两秒进行过渡
-2s : 提前两秒进行过渡

transition-timing-function : 规定速度效果的速度曲线。
运动形式：加速、减速、匀速…
linear
ease（默认值）
ease-in
ease-out
ease-in-out
cubic-bezier
（ http://cubic-bezier.com ）

复合写法：
transition:all 2s linear; √
transition:linear 2s all; √
transition:2s linear all; √
注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
transition:2s 3s linear all; √
注意：不要把transition放到hover中

2、 transform变形

translate : 位移
transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )

scale : 缩放
transform:scale(num) num是一个比例值，正常比例是1。
transform:scale(num1 , num2) 两个值 分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d )

rotate : 旋转
transform:rotate(num) num是旋转的角度 30deg
正值：顺时针旋转
负值：逆时针旋转
表示一个角：角度deg 或 弧度rad

rotateX() ( 3d )
rotateY() ( 3d )
rotateZ()
注 : rotate()跟rotateZ()是等价关系。

skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y
transform:skewX()
transform:skewY()
注：skew没有3d写法。

注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
注：变形操作对inline(内联元素)不起作用的。
注：transform可以同时设置多个值。
先执行后面的操作，在执行前面的操作。
位移会受到后面要执行的缩放、旋转和斜切的影响。

3、 tranform-origin 基点位置

主要是针对 旋转和缩放，默认都是中心点为基点。