CSS translate() 函数

定义和用法

CSS 的 translate() 函数允许您更改元素的位置。

translate() 函数在 transform 属性中使用。

实例

更改元素的位置：

#myDiv1 {
  transform: translate(50px); /* 将元素沿 x 轴移动 50px，沿 y 轴移动 0px */
}

#myDiv2 {
  transform: translate(50px, 20px); /* 将元素沿 x 轴移动 50px，沿 y 轴移动 20px */
}

#myDiv3 {
  transform: translate(100px, 30px); /* 将元素沿 x 轴移动 100px，沿 y 轴移动 30px */
}

亲自试一试

CSS 语法

translate(x, y)
值 描述
x 必需。定义元素沿 x 轴移动的距离，可以是数字或百分比。
y

可选。定义元素沿 y 轴移动的距离，可以是数字或百分比。

如果省略，则值设置为 0。

技术细节

版本： CSS Transforms Module Level 1

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

相关页面

教程：CSS 2D 变换

参考：CSS transform 属性

参考：CSS translateX() 函数

参考：CSS translateY() 函数

参考：HTML DOM transform 属性