CSS中变形过渡与动画

一、变形效果

1、CSS3中实现变形的优点：

(1)不需要加载额外的文件(flash文件)
       
(2)提供开发效率
       
(3)提高页面的执行速度

2、用法：

transform:none | transform-function
       
none：不变形

transform-function：指定变形函数

3、变形函数：

  (1)matrix(<number>,<number>,<number>,<number>,<number>,<number>)： 
        
            以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于
            
            直接应用一个[a,b,c,d,e,f]变换矩阵

        (2)translate(<length>[, <length>])： 指定对象的2D translation(2D平移)。
        
           第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
            
        (3)translateX(<length>)： 指定对象X轴（水平方向）的平移 
        
        (4)translateY(<length>)： 指定对象Y轴（垂直方向）的平移 

        (5)scale(<number>、[<num