css3动画效果的变换个人总结

 css3动画变换 transform: 
兼容性问题 
1. webkit 谷歌浏览器
2. moz    火狐浏览器
3. ms microsoft 微软W3c标准
4. o Opera IE9
属性: 
1. matrix 矩阵（6个参数：a,b,c,d,tx,ty）
2. translate 2D平移(x,y)


         #div1{
            width: 300px;
            height: 300px;
            background: blue;
            -webkit-animation:change linear 1s;
        }
        @-webkit-keyframes change{
            from{transform:translate(0,0)}
            to{transform:translate(0,200px)}
        }
3. rotate 2D选转（x deg度）

        @-webkit-keyframes change{
            from{transform:rotate(0deg)}
            to{transform:rotate(90deg)}
        }
4. scale 缩放（1，1）0-1表示当前缩放倍数

         @-webkit-keyframes change{
            from{transform:scale(0,0)}
            to{transform:scale(1,1)}
        }
5. skew 斜切扭曲（水平方向扭曲，垂直方向的扭曲）
 
         @-webkit-keyframes change{
            from{transform:skew(0)}
            to{transform:skew(180deg,0deg)}
        }
        
6. transform-origin 变换对象的原点（x y）百分比，像素，left..
     注意一点这里括号里面参数不是都好而是空格