translate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

translate()CSS関数で、要素を水平方向や垂直方向で再配置します。結果は <transform-function> データ型になります。

試してみましょう

この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。

構文

css
/* 単一の <length-percentage> 値 */
transform: translate(200px);
transform: translate(50%);

/* 二つの <length-percentage> 値 */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

単一の <length-percentage> values

この値は <length> または <percentage> で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は 0 に設定されます。例えば、 translate(2px)translate(2px, 0) と等価です。パーセント値の場合は、 transform-box で定義される参照ボックスの幅からの相対値です。

二つの <length-percentage>

この値は 2 つの <length> または <percentage> 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 transform-box で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)

ℝ^2 では線形変換ではないので、直交座標の行列で表すことはできません。

(1 0 tx 0 1 ty 0 0 1) (1 0 tx 0 1 ty 0 0 1) (1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1)
[1 0 0 1 tx ty]

形式文法

css
translate(<length-percentage>, <length-percentage>?)

単一軸を使用した移動

HTML

html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* translateX(10px) または translate(10px, 0) と同じ */
  transform: translate(10px);
  background-color: pink;
}

結果

Y 軸と X 軸の移動の組み合わせ

HTML

html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

結果

仕様書

Specification
CSS Transforms Module Level 1
# funcdef-transform-translate

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
translate()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報