CSS `translate()` 関数

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

試してみましょう

transform: translate(0);

transform: translate(42px, 18px);

transform: translate(-2.1rem, -2ex);

transform: translate(3ch, 3mm);

<section id="default-example">
  <img
    class="transition-all"
    id="static-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

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

構文

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 では線形変換ではないので、直交座標の行列で表すことはできません。	$\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
ℝ^2 では線形変換ではないので、直交座標の行列で表すことはできません。	`[1 0 0 1 tx ty]`

形式文法

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

<length-percentage> = 
  <length>      |
  <percentage>

例

単一軸を使用した移動

HTML

html

<div>静的</div>
<div class="moved">移動</div>
<div>静的</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>静的</div>
<div class="moved">移動</div>
<div>静的</div>

CSS

css

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

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

結果

仕様書

仕様書
CSS Transforms Module Level 1 # funcdef-transform-translate

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年5月5日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

CSS translate() 関数

HTML

CSS

結果

HTML

CSS

結果

MDN の改良に協力

CSS `translate()` 関数