translate

Baseline 2022

Newly available

Since August 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

試してみましょう

構文

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報

メモ: skew には独立した transform の値はありません