CSS の translateZ() 関数は、3 次元空間の z 軸に沿って要素を移動させます。この変換は、移動量を定義する <length> によって指定されます。
translateZ(tz) は、translate3d(0, 0, tz) の簡潔な記述です。
構文
translateZ(t)
値
- t
- 移動ベクトルの z 成分を示す
<length>値。<percentage>を用いることはできません。使うと、その変換を含むプロパティは無効とされます。
| デカルト座標 ℝ2 | 同次座標 ℝℙ2 | デカルト座標 ℝ3 | 同次座標 ℝℙ3 |
|---|---|---|---|
| この変換は 3 次元空間に適用されます。平面上では表現できません。 | この変換は ℝ3 の線形変換ではなく、デカルト座標系の行列では表現できません。 | ||
例
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);
}