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 屬性