CSS translate 属性

定义和用法

translate 属性允许您更改元素的位置。

translate 属性定义了元素在二维空间中的 x 轴和 y 轴坐标。您还可以定义 z 轴坐标以在三维空间中更改位置。

坐标可以仅给出 x 轴坐标、x 轴和 y 轴坐标，或者 x 轴、y 轴和 z 轴坐标。

为了更好地理解 translate 属性，请查看演示。

提示：要使 z 轴属性生效，您需要为 CSS perspective 属性定义一个值。

注意：另一种平移元素的技术是使用带有 CSS translate() 函数 的 CSS transform 属性。本页的 CSS translate 属性可以说是一种更简单、更直接的方法来平移元素。

实例

例子 1

更改元素的位置：

div {
  translate: 100px 20px;
}

亲自试一试

例子 2

当设置 z 轴的 translate 属性时，必须在父元素上也设置 perspective 属性，我们才能看到任何效果：

DIV1 {
  perspective: 200px;
}

DIV2 {
  translate: 50px 50px 50px;
}

亲自试一试

CSS 语法

translate: x-axis y-axis z-axis|initial|inherit;

属性值

技术细节

浏览器支持

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

相关页面

CSS 教程：CSS 2D 变换

CSS 教程：CSS 3D 变换

CSS 参考：CSS scale 属性

CSS 参考：CSS rotate 属性

CSS 参考：CSS perspective 属性