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 レベル1

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
1 12 3.5 3.1 10.5

関連ページ

教程：CSS 2D 变换

参考：CSS transform 属性

参考：CSS translate() 函数

参考：CSS translateY() 函数

参考：HTML DOM transform 属性