CSS の translateZ() 関数は、要素に奥行きを加え、空間内で前後に移動させます。言い換えると、3D 空間の Z 軸に沿って要素を移動させます。

.box:hover {
  transform: translateZ(100px);
}

.box.perspective:hover {
  transform: perspective(500px) translateZ(100px);
}

translateZ() を動作させるには、perspective() 関数または perspective プロパティのいずれかが必要です。 どちらも指定しない場合、効果はありません。

次のデモでスイッチをオンにして、ボックスにマウスをホバーすると、ボックスが手前に近づいて見えます。

ホバー時に .box 要素が「大きくなっている」ように見えますが、それは正しくありません。実際には、ボックスがユーザーに向かって 100 ピクセル 近づくことで、大きく見えているだけです。少し後で詳しく説明します。

translateZ() は scale() 関数や scale プロパティの代替ではありません。パースペクティブとスケールは異なる概念です。

translateZ() 関数は CSS Transform Module Level 2 仕様で定義されています。

Syntax

translateZ() = translateZ(<length>)

translateZ() 関数は、画面手前からの距離を定義する単一の <length> 引数を取り、transform プロパティと組み合わせて使用します。

Arguments

/* 正の長さ */
transform: translateZ(100px);
transform: translateZ(5rem);

/* 負の長さ */
transform: translateZ(-50px);
transform: translateZ(-8em);

translateZ() 関数は次の単一の引数を取ります。

  • <length>: 画面手前からの要素の距離。正の値の場合、要素はユーザーに近づき、負の値の場合、要素は遠ざかります。

How it works

translateZ() 関数は、ブラウザのデフォルトでは視覚的に知覚できない Z 軸に沿って要素を移動させるため、少しわかりにくいです。ブラウザは高さと幅のみで要素をレンダリングし、奥行きは考慮しないため、translateZ() 関数は何も起こっていないように見えることがあります。

A three-dimensional plane on top of a grid with perspective, showing the X, Y, and Z axes.

奥行きと投影を表示するには、perspective プロパティまたは perspective() 関数を使用する必要があります。また、親要素に transform-style を preserve-3d に設定することで、子要素を 3D で配置できます。

Projection and perspective

ウェブサイト上では、要素が 2D 画面に平坦化されているため、「近さ」や「遠さ」といった奥行きの感覚はありません。translate(200px) でも translate(20px) でも、要素は同じ距離に知覚され、明示的に有効化しない限りパースペクティブは存在しません。次の HTML で確認してみましょう。

<div class="scene">
  <div class="parent">
    <div class="box">translateZ(100px)</div>
  </div>
</div>

まず、シーン全体にパースペクティブを有効にします。

.scene {
  perspective: 800px;
}

次に、親要素の transform-style を preserve-3d に設定して、子要素も 3D で変換されるようにします。

.parent {
  transform-style: preserve-3d;
}

次に、translateZ() を使用して .box をユーザーに向かって 100px 移動させます。

.box {
  transform: translateZ(100px);
}

ボックスが 100px 大きくなったように見えますが、親要素を横から回転させると、.box 自体のサイズは変わっておらず、.parent と .box の距離が変わったことがわかります。

A tall blue rectangle rotated left along the Y-axis adding perspective.

perspective vs. perspective()

どちらも同じ役割を果たします：要素の投影を定義する ことです。perspective プロパティはすべての 3D 要素に対して親要素に適用され、perspective() 関数は単一の 3D 要素にのみ適用でき、3D 変換関数の前に宣言する必要があります。

The perspective property

.parent {
  perspective: 800px;
}

.child-1 {
  transform: translateZ(200px); /* 800px の投影内で定義 */
}

.child-2 {
  transform: translate3D(100px, 200px, 150px); /* 800px の投影内で定義 */
}

The perspective() function

.element {
  transform: translateZ(100px) perspective(800px); /* 不可 ❌ */
}

.element {
  transform: perspective(800px) translateZ(100px); /* 可 ✅ */
}

It can also be used to optimize web performance

translateZ() 関数は、ウェブサイトのパフォーマンスを向上させるためにも使用できます。CSS の 3D 変換関数は GPU を使用するため、要素のレンダリングにおいて CPU よりも高速で優れています。このパフォーマンスハックは、アニメーション中のちらつきを防ぎ、トランジションをより滑らかにします。

開発者は translateZ(0) を追加してレンダリングを CPU から GPU に移行し、パフォーマンスを改善します。ちらつくアニメーションに悩んでいる場合は、これで修正できます！

Demo

Specification

translateZ() 関数は CSS Transform Module Level 2 仕様で定義されています。

Browser support

translateZ() 関数は、すべてのモダンブラウザで利用可能です。

References

More on 3D transforms!