Translate プロパティ
最終更新：2026-09-13
translate Translate プロパティ
translate プロパティは、要素を 2D または 3D 空間で移動させる個別変換プロパティです。transform: translate() と同じ効果を持ちますが、独立したプロパティとしては、回転やスケーリングなどの他の変換に影響を与えずに移動を個別に制御でき、各変換を個別にアニメーションさせたい場合に非常に便利です。
| カテゴリ | |
|---|---|
| 初期値 | none |
| 継承 | いいえ |
| 適用対象 | |
| アニメーションタイプ | |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
translate: none | <length-percentage> [<length-percentage> [<length>]?]?;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
none | キーワード | 移動なし |
<length> | <percentage> | タイプ | 移動の値（x、y、z を指定可能） |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| translate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| すべての主要ブラウザーでサポート | |||||
ヒント： translate は 1〜3 個の値を受け取ります。1 個の値は X 軸のみの移動、2 個の値は X 軸と Y 軸の移動、3 個目の値は Z 軸の移動も追加します（表示するには perspective が必要です）。
ヒント： translate のパーセンテージは要素自身のサイズに対するものであり、親要素に対するものではありません（left/top とは異なります）。
❓ よくある質問
Qtranslate プロパティと left/top の違いは何ですか？
Atranslate は視覚的な移動のみを生み出します。ドキュメントフローを変更せず、再レイアウト（reflow）も発生しません。ブラウザは要素を GPU が処理する合成レイヤーに昇格させるため、アニメーションは滑らかなままです。一方 left/top はレイアウト上の位置を変更し、各フレームで再レイアウトと再描画を強制するため、パフォーマンスが悪く、周囲の要素も押し動かします。アニメーションやホバー時の移動には、translate または transform: translate() を優先してください。
Qtranslate と transform: translate() の間にパフォーマンスの違いはありますか？
Aどちらもほぼ同じように描画され、どちらも合成レイヤーで実行されます。本当の違いは制御にあります。独立した translate プロパティは、要素にすでに存在する回転やスケーリングなどの transform 値を上書きすることなく、単独でアニメーションできます。これは各変換を個別にアニメーションするのに最適です。transform: translate() は他の関数と同じリストに含まれるため、変更するにはリスト全体を書き直す必要があります。
Qtranslate のパーセンテージは何に対するものですか？なぜ left と異なるのですか？
Atranslate のパーセンテージは要素自身の寸法に対するものですが、left/top のパーセンテージは包含ブロック（containing block）に対するものです。たとえば translate: 100% は要素を自身の幅だけ右に移動させます。この特性を活用すると、position: absolute と translate: -50% -50% を組み合わせることで、要素のサイズを知らなくても水平・垂直方向の両方で中央揃えが簡単に実現できます。
QCSS コードで translateZ の視覚的な効果が見えないのはなぜですか？
AtranslateZ は Z 軸に沿って移動しますが、perspective がない場合は投影サイズが変化しないため、要素は静止しているように見えます。親要素に perspective プロパティを設定するか、transform に perspective() 関数を含めると、近くが大きく遠くが小さくなる奥行きの変化が見えるようになります。同じ理由で、translate の 3 番目の値は 3D シーンの場合にのみ意味を持ちます。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
