translateZ()

Baseline Widely available

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

translateZ()CSS関数で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は <transform-function> データ型となります。

試してみましょう

この変換は、 <length> によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。

上記のデモでは、perspective: 550px; (3D 空間を作るため) と transform-style: preserve-3d; (立方体の 6 つの面である子を 3D 空間に配置) を立方体に設定しました。

メモ: translateZ(tz) は、translate3d(0, 0, tz) と等価です。

構文

css
translateZ(tz)

tz

変換ベクトルの z 成分を表す<length>直交座標系では Z 軸方向の移動量をを表します。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)
この変換は 3D 空間に適用されます。平面上では表現できません。 この変換は ℝ^3 の線形変換ではなく、直交座標系の行列では表現できません。 ( 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 )

この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。

HTML

html
<div>Static</div>
<div class="moved">Moved</div>

CSS

css
div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}

ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 perspective() 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 500px という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。

次に、translateZ() 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。

なお、 perspective() の値が translateZ() の値よりも小さい場合、例えば transform: perspective(200px) translateZ(300px); の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。

メモ: 変換の合成は交換可能ではないので、異なる関数を書く順番は重要です。具体的な例として、一般的には perspective()translateZ() の前に配置します。

結果

仕様書

Specification
CSS Transforms Module Level 2
# funcdef-translatez

ブラウザーの互換性

BCD tables only load in the browser

関連情報