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: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

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

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

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

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

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

Diese Transformation wird durch eine <length> definiert, die angibt, wie weit das Element oder die Elemente nach innen oder außen bewegt werden.

In den obigen interaktiven Beispielen wurden perspective: 550px; (um einen 3D-Raum zu erstellen) und transform-style: preserve-3d; (damit die Kinder, die 6 Seiten des Würfels, ebenfalls im 3D-Raum positioniert sind) auf den Würfel angewendet.

tz

Ein <length>, der die z-Komponente des Übersetzungsvektors [0, 0, tz] darstellt. Im kartesischen Koordinatensystem stellt er die Verschiebung entlang der z-Achse dar. Ein positiver Wert bewegt das Element in Richtung des Betrachters, ein negativer Wert weiter weg.

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

In diesem Beispiel werden zwei Boxen erstellt. Eine ist normal auf der Seite positioniert, ohne jegliche Translation. Die zweite wird verändert, indem Perspektive angewendet wird, um einen 3D-Raum zu erstellen und dann in Richtung des Benutzers bewegt wird.

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

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

Wesentlich ist hier die Klasse "moved"; werfen wir einen Blick darauf, was sie bewirkt. Zuerst positioniert die Funktion perspective() den Betrachter relativ zu der Ebene, die dort liegt, wo z=0 (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" der Bilddarstellung bei z=0 befindet.

Dann verschiebt die translateZ()-Funktion das Element 200 Pixel "nach außen" vom Bildschirm, in Richtung des Benutzers. Dies führt dazu, dass das Element auf einem 2D-Display größer erscheint oder auf einem VR-Headset oder einem anderen 3D-Display-Gerät näher wirkt.

Beachten Sie, dass wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie zum Beispiel bei transform: perspective(200px) translateZ(300px);, das transformierte Element nicht sichtbar sein wird, da es weiter als der Viewport des Benutzers entfernt ist. Je kleiner der Unterschied zwischen den Perspektive- und den translateZ-Werten, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

• transform
• <transform-function>
• translate