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

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

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

構文

translateZ(t)

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 ディスプレイデバイスを使用して見たときに要素をより近く見せるという効果があります。

結果

仕様

仕様 状態 コメント
CSS Transforms Level 2
transform の定義
編集者草案 3D 変換関数を CSS Transforms 標準に追加します。

ブラウザー互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 12.0 -webkit
36
(有) 10.0 -moz
16.0 (16.0)
10.0 15.0-webkit
23

4.0 -webkit
9.0

Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 3.0-webkit (有)-webkit (有) (有) (有) 22-webkit 3.2 (有)-webkit
9.0

関連項目

ドキュメントのタグと貢献者

このページの貢献者: momdo, dskmori, FumioNonaka
最終更新者: momdo,