css3动画系列之translate方法

最新推荐文章于 2025-10-15 10:52:47 发布

原创最新推荐文章于 2025-10-15 10:52:47 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#translate #html5 #css3

html5+css3基础知识专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了CSS中transform属性的应用，特别是translate()方法如何使元素按照指定的x和y坐标进行移动。文中提供了不同浏览器对该属性的支持情况及使用示例。

浏览器支持情况

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 像素。