CSS translate 属性

更改元素的位置：

div {
translate: 100px 20px;
}

定义和用法

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

这个translate属性定义 2D 元素的 x 和 y 坐标。您还可以定义 z 坐标以更改 3D 位置。

坐标只能以 x 坐标、x 和 y 坐标或者 x、y 和 z 坐标的形式给出。

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

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

笔记：翻译元素的另一种技术是使用 CSStransformCSS 属性translate()功能。 CSStranslate正如本网页所解释的，property 可以说是一种更简单、更直接的元素翻译方式。

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
translate	104	104	72	14.1	90

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

Property Value	Description	Demo
x-axis	Defines position at the x-axis. Possible values: length %	Demo ❯
y-axis	Defines position at the y-axis. Possible values: length %	Demo ❯
z-axis	Defines position at the z-axis. Possible values: length	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit