日期:2014-05-16  浏览次数:20627 次

css3动画系列之translate方法

浏览器支持情况

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 需要前缀 -ms-。

?

translate() 方法

?通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

实例

?

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

亲自试一试

值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

?

?

?