css过渡及变形

1.css过渡
  语法：
  div {
    transition: <property> <duration> <timing-function> <delay>;
 }

transition 是 transition-property， transition-duration，transition- timing-function ，transition-delay的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟

    过渡与动画的区别：
         过渡需要触发
         不是所有的属性都能过渡

2.css变形
  语法：
  div {
    transform: xxx();
    transform-origin:center;
 }

属性：
transform   用来指定一个变形函数对元素执行变形操作
 旋转：
   rotateX (angle)   绕X轴旋转，例如单杠运动  30deg
   rotateY (angle)  绕Y轴旋转，例如钢管舞运动
   rotateZ (angle)   绕Z轴旋转，例如旋转盘。
   rotate (angle)   与rotateZ()一致。
 
 倾斜：
   skew（X,Y)
   skewX(deg) 表示水平方向的扭转
   skewY(deg) 表示垂直方向的扭转

 缩放:
    scale() 函数能够更改元素的大小，scale变换的是通过矢量来实现，它的坐标定义了每个方向上的缩放比例。如果两个向量的坐标是相等的，缩放是均匀的
    scale(x,y)

 移动：
    translate(xpx, ypx) 函数能够移动元素。x为元素在水平方向上移动的距离，y为元素在垂直方向上移动的距离。