MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

translateZ()

CSS の translateZ() 関数は、3 次元空間の z 軸に沿って要素を移動させます。この変換は、移動量を定義する <length> によって指定されます。

translateZ(tz) は、translate3d(0, 0, tz) の簡潔な記述です。

構文

translateZ(t)

t
移動ベクトルの z 成分を示す <length> 値。<percentage> を用いることはできません。使うと、その変換を含むプロパティは無効とされます。
デカルト座標 ℝ2 同次座標 ℝℙ2 デカルト座標 ℝ3 同次座標 ℝℙ3
この変換は 3 次元空間に適用されます。平面上では表現できません。 この変換は ℝ3 の線形変換ではなく、デカルト座標系の行列では表現できません。 10000100001t0001

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /* 作成する 3 次元空間に視点を加えます */
  /* ユーザは 500px 離れた位置から見て */
  /* 要素をユーザに向かって 200px */
  /* 手前に押し出します */
  transform: perspective(500px) translateZ(200px);
}

結果

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

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