0%

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




























FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support(Yes) -webkit3.5 (1.9.1)-moz
16.0 (16.0)
9.0 -ms
10.0
10.5-o
12.10
3.1-webkit
3D Support12.0-webkit10.0-moz
16.0 (16.0)
10.0Not supported4.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);