CSS translateX() 函數

定義和用法

CSS 的 translateX() 函數允許您沿 x 軸（水平方向）重新定位元素。

translateX() 函數在 transform 屬性中使用。

實例

沿水平方向重新定位不同的 <div> 元素：

#myDiv1 {
  transform: translateX(50px); /* 將元素沿 x 軸移動 50px */
}
#myDiv2 {
  transform: translateX(100px); /* 將元素沿 x 軸移動 100px */
}
#myDiv3 {
  transform: translateX(-10px); /* 將元素沿 x 軸移動 -10px */
}

親自試一試

CSS 語法

translateX(x)
值 描述
x 必需。定義元素沿 x 軸移動的距離，可以是數字或百分比。

技術細節

版本： CSS Transforms Module Level 1

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

相关頁面

শিক্ষা:CSS 2D ট্রান্সফর্ম

সূত্র:CSS ট্রান্সফর্ম এট্রিবিউট

সূত্র:CSS translate() ফাংশন

সূত্র:CSS translateY() ফাংশন

সূত্র:HTML DOM transform এট্রিবিউট