CSS3-transform详细参数

最近研究触屏站的代码，发现很多门户站都使用了transform的位移来代替position，这样做的好处也很明显，CSS3可以最大限度优化性能，让页面动画更加流畅，所有我就详细看了一下transform的参数，做下小结：
transform全部参数如下：

transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)

matrix

transform:  matrix(a, c, b, d, tx, ty)
/以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   /

background: gold; width: 20rem;
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
-o-transform: matrix(1, -0.2, 0, 1, 0, 0);
transform: matrix(1, -0.2, 0, 1, 0, 0);

translate,translateX,translateY

transform:  translate(tx[, ty])  / one or two  values /
/
translate([, ])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX()：指定对象X轴（水平方向）的平移
translateY()：指定对象Y轴（垂直方向）的平移
/

background: gold; width: 20rem;
-webkit-transform: translate(10px,-10px);
-o-transform: translate(10px,-10px);
transform: translate(10px,-10px);

scale,scaleX,scaleY

transform:  scale(sx[, sy]);     / one or two unitless s, e.g.  scale(2.1,4) /
/
scale([, ])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX()：指定对象X轴的（水平方向）缩放
scaleY()：指定对象Y轴的（垂直方向）缩放
/

background: gold; width: 10rem;
-webkit-transform: scale(2,0.5);
-o-transform: scale(2,0.5);
transform: scale(2,0.5);

rotate

transform:  rotate(angle);       / an , e.g.  rotate(30deg) /
/
rotate()：指定对象的2D rotation（2D旋转），可以用transform-origin属性定义中心点
/

background: gold; width: 20rem;
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

skew,skewX,skewY

transform:  skew(ax[, ay])       / one or two s, e.g.  skew(30deg,-10deg) /
/
skew( [, ])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX()：指定对象X轴的（水平方向）扭曲
skewY()：指定对象Y轴的（垂直方向）扭曲
/

background: gold; width: 20rem;
-webkit-transform: skew(30deg,-10deg);
-o-transform: skew(30deg,-10deg);
transform: skew(30deg,-10deg);

3D进阶

3D的变换就是在2D的xy轴基础上又加入了z轴，但是目前支持3D变换的浏览器要更少，见下边，统计来自developer.mozilla.org

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes) -webkit	3.5 (1.9.1)-moz 16.0 (16.0)	9.0 -ms 10.0	10.5-o 12.10	3.1-webkit
3D Support	12.0-webkit	10.0-moz 16.0 (16.0)	10.0	Not supported	4.0-webkit

translate3d,translateZ

background: gold; width: 20rem;
-webkit-transform: translate3d(10px,20px,30px);
-o-transform: translate3d(10px,20px,30px);
transform: translate3d(10px,20px,30px);

scale3d,scaleZ

background: gold; width: 20rem;
-webkit-transform: scale3d(1.5,1.5,2);
-o-transform: scale3d(1.5,1.5,2);
transform: scale3d(1.5,1.5,2);

rotate3d,rotateZ

background: gold; width: 20rem;
-webkit-transform: rotate3d(1, 2.0, 3.0, 10deg);
-o-transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotate3d(1, 2.0, 3.0, 10deg);