CSSのtranslate()関数は、2次元の平面上で要素をデフォルト位置から移動させます。これにより、要素を水平方向、垂直方向、または両方向に再配置することができます。

.parent:hover .box {
  transform: translate(50px, 50%);
}

ボックスにマウスをホバーすると、幅の50%左方向に移動するのが確認できます：

他のtransform関数と同様に、transformプロパティ内で使用されます。

translate()関数は、CSS Transforms Module Level 1ドラフトで定義されています。

Syntax

translate()関数の構文は次のようになります：

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

…これは、1つまたは2つの長さやパーセント値で要素を移動（translate）できることを示しています。例については後ほど説明しますが、その前に：

Arguments

/* 引数が1つの場合 */
translate(100px) /* 右方向に100px移動 */
translate(-100%) /* 要素の幅の100%左方向に移動 */

/* 引数が2つの場合 */
translate(50px, 100px) /* 下方向に50px移動、その後右方向に100px移動 */
translate(50%, 100%) /* 要素の幅の50%下方向に移動、その後高さの100%右方向に移動 */

translate()関数は2つの<length-percentage>引数（tx、ty。「水平方向にtranslate」「垂直方向にtranslate」の意）を受け取ります。これらは、要素をどの程度、どの方向（正または負）に移動するかをブラウザに指示します。

  • tx：水平軸方向の変位を指定します。正の値の場合、要素は右に移動します。負の値の場合、要素は左に移動します。
  • ty（任意）：垂直軸方向の変位を指定します。正の値の場合、要素は下方向に移動し、負の値の場合、上方向に移動します。

引数が1つだけ渡された場合、それはtxとみなされます。また、2つの引数が渡された場合、2番目の引数はtyになります。これらを組み合わせることで、要素は斜め方向に移動します。

<length>または<percentage>値のどちらも使用できることに気づくでしょう。<length>値は絶対値ですが、<percentage>値は要素の幅（txの場合）または高さ（tyの場合）に対する相対値です。

Basic usage

CSSで要素を中央揃えする方法は多数ありますが、その歴史の大部分において、絶対配置要素を中央揃えする最善の方法はtranslate()関数を使用することでした。

手順は次の通りです。絶対配置の要素に対して、通常はtop: 50%とleft: 50%を使用して中央に配置します。しかし、これだけでは要素の左上隅が中央に固定されるだけで、要素自体が中央に配置されるわけではありません。これを修正するために、transform: translate(-50%, -50%)を使用して、要素を自身の幅と高さの半分だけ逆方向に移動します。

.modal-center {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) scale(0.9);
}

最近では、既知のjustify-selfおよびalign-selfプロパティを使用してこれを行うことができます。あるいは、デフォルトで中央配置される意味的なdialogモーダルを使用することもできます。

Diagonal movements

translateX()関数は要素を水平方向に移動し、translateY()は垂直軸を扱います。斜め方向の移動が必要な場合は、両方を組み合わせるか、より短いtranslate()関数を使用できます。

一般的なユースケースは、要素をページの任意の隅からページ内に移動させることです。例えば、Toastコンポーネントがあり、右下からスライドインさせたい場合、bottomとrightプロパティで要素を移動させ、次にtranslate()でページ外にオフセットできます。

.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;

  transform: translate(40px, 40px);
  transition: transform 0.28s ease;
}

次に、.showクラスがトリガーされると、translate()値がリセットされ、斜め方向にスライドインします：

.toast.show {
  opacity: 1;
  transform: translate(0, 0);
}

It doesn’t affect other elements

translate()関数は、他のtransform関数と同様に、ドキュメントフローには影響しません。代わりに、周囲の要素や新しい位置の要素を押し出さずに、変換された要素を視覚的に新しい位置に移動します。また、要素が元々占有していたスペースは、まるで移動していないかのようにレイアウトに予約されたままです。

/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translate(80px, 40px);
}

「translated」要素が移動しても、隣接するBox 1やBox 2の要素が移動しないことに注目してください。

リフローや隣接要素の移動を引き起こす可能性があるmarginとは異なり、translate()は要素の視覚的なレンダリング位置のみを変更します。

Issues with pointer pseudo-classes

translate()を:hoverのようなポインター疑似クラスに直接使用すると、悪いインタラクションを引き起こす場合があります。カーソルから十分に離れた位置に要素が移動した場合、:hover状態が終了し、要素が元の位置に即座に戻る原因となります。カーソルがまだ留まっている位置に戻るため、再びtranslateされ、連続的なちらつきループが発生します。

この問題の簡単な解決策は、translateされる要素を親コンテナ内に配置し、疑似クラス（:hover）を親に適用し、メイン要素にtranslate関数を適用することです。

/* Problem case */
.bad:hover {
  transform: translateX(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateX(160px);
}

Demo

Specification

CSSのtranslate()関数は、現在Editor’s DraftsのCSS Transforms Module Level 1で定義されています。

Browser support

translate()関数は、すべてのモダンブラウザでベースラインサポートされています。

Further reading