translate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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