translateZ()

translateZ() CSS 関数は、3 次元空間の z 軸に沿って、すなわちビューアーに近づくまたは遠ざかって、要素を移動させます。その結果は <transform-function> データ型となります。

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

上記のデモでは、 perspective: 550px; (3D空間を作成するため) と transform-style. preserve-3d; (従って、子つまり立方体の6辺も3D空間に配置されています) が、立方体に設定されています。

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

構文

translateZ(tz)

tz
変換ベクトルの z 成分を表す<length>。正の値では要素がビューアーに向かって移動し、負の値で移動すると遠ざかります。
2 のデカルト座標 ℝℙ2 の同次座標 3 のデカルト座標 ℝℙ3 の同次座標
この変換は 3 次元空間に適用されます。平面上では表現できません。 この変換は ℝ3 の線形変換ではなく、デカルト座標系の行列では表現できません。 10000100001t0001

この例では、2 つのボックスが作成されます。 1 つは通常変換されずにページ上に配置されます。 2 番目の方法は、3D 空間を作成するためのパースペクティブを適用して変更し、ユーザーに向かって移動します。

HTML

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

CSS

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

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

本当にここで重要なのは、class "moved" です。それが何をするかを見てみましょう。 まず、perspective() 関数は、ビューアーを、z=0 (本質的にスクリーンの表面) にある平面に対してビューアーを配置します。500px の値は、ユーザーが z=0 にある画像の「正面」に 500 ピクセルあることを意味します。

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

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

結果

仕様書

仕様書 状態 備考
CSS Transforms Level 2
transform の定義
編集者草案 3D 変換関数を CSS Transforms 標準に追加。

ブラウザーの互換性

<transform-function> データ型の互換性情報をご覧ください。

関連情報