translate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2022年8月⁩.

translate は CSS のプロパティで、平行移動の座標変換を独自に、 transform プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 transform の値で指定する変換関数を正確に思い出す必要がなくなります。

試してみましょう

translate: none;

translate: 40px;

translate: 50% -40%;

translate: 20px 4rem;

translate: 20px 4rem 150px;

<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </section>

#default-example { background: linear-gradient(skyblue, khaki); perspective: 800px; perspective-origin: 150% 150%; } #example-element { width: 100px; height: 100px; perspective: 550px; transform-style: preserve-3d; } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: white; } .front { background: rgba(90, 90, 90, 0.7); transform: translateZ(50px); } .back { background: rgba(0, 210, 0, 0.7); transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(210, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(0, 0, 210, 0.7); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(210, 210, 0, 0.7); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(210, 0, 210, 0.7); transform: rotateX(-90deg) translateZ(50px); }

構文

css

/* キーワード値 */ translate: none; /* 単一の値 */ translate: 100px; translate: 50%; /* 二つの値 */ translate: 100px 200px; translate: 50% 105px; /* 三つの値 */ translate: 50% 105px 5rem; /* グローバル値 */ translate: inherit; translate: initial; translate: revert; translate: unset;

値

単一の <length-percentage> 値: 単一の <length> または <percentage> 値で、 X 軸方向の平行移動を指定します。 translate() （2D の平行移動）関数に単一の値を指定したものと同等です。
2 つの <length-percentage> 値: 2 つの <length> または <percentage> 値で、 2D の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 translate() （2D の平行移動）関数に 2 つの値を指定したものと同等です。
3 つの値: 2 つの <length-percentage> 値と 1 つの <length> 値で、 3D の平行移動における X, Y, Z 軸の移動量を（それぞれ）指定します。 translate3d() （3D の平行移動）関数と同等です。
none: 平行移動が適用されないことを指定します。

公式定義

初期値	`none`
適用対象	座標変換可能要素
継承	なし
パーセント値	囲みボックスの寸法に対する相対値
計算値	指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類	座標変換
重ね合わせコンテキストの生成	あり

形式文法

translate = 
 none |
 <length-percentage> [ <length-percentage> <length>? ]? 

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

例

ホバー時に要素を移動

この例では、 translate プロパティを使用して要素を 3 軸で移動させる方法を示します。 1 つ目のボックスは X 軸に沿って移動され、 2 つ目のボックスは X 軸と Y 軸に沿って移動されます。 3 つ目のボックスは X 軸、Y 軸、Z 軸に沿って移動し、親要素に perspective が追加されているため、閲覧者に向かって移動しているように見えます。

HTML

html

<div class="wrapper"> <div id="box1">translate X</div> <div id="box2">translate X,Y</div> <div id="box3">translate X,Y,Z</div> </div>

CSS

css

.wrapper { perspective: 100px; display: inline-flex; gap: 1em; } .wrapper > div { width: 7em; line-height: 7em; text-align: center; transition: 0.5s ease-in-out; border: 3px dotted; } #box1:hover { translate: 20px; } #box2:hover { translate: 20px 20px; } #box3:hover { translate: 5px 5px 30px; }

結果

仕様書

Specification
CSS Transforms Module Level 2 # individual-transforms

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年11月1日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content