css3动画系列之translate方法

iteye_7560

于 2014-02-28 15:34:43 发布

阅读量1.5k

点赞数

分类专栏： html5+css3基础知识文章标签： translate html5 css3

本文链接：https://blog.youkuaiyun.com/iteye_7560/article/details/82570607

版权

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

15 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器支持情况

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