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