translateZ()

試してみましょう

transform: translateZ(0);

transform: translateZ(42px);

transform: translateZ(-9.7rem);

transform: translateZ(-3ch);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

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

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

構文

translateZ(tz)

値

tz

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

形式文法

<translateZ()> = 
  translateZ( <length> )  

例

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

HTML

<div>静的</div>
<div class="moved">移動</div>

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 の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。

結果

仕様書

ブラウザーの互換性

関連情報

• transform
• <transform-function>
• translate