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 モジュール レベル 1

ブラウザのサポート

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

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

関連ページ

チュートリアル：CSS 2D 変換

参考：CSS transform 属性

参考：CSS translateX() 函数

参考：CSS translateY() 函数

参考：HTML DOM transform 属性