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..

注意一点这里括号里面参数不是都好而是空格