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);
}

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

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

tz

Eine <length> die die z-Komponente des Übersetzungvektors [0, 0, tz] repräsentiert. Im kartesischen Koordinatensystem stellt es die Verschiebung entlang der z-Achse dar. Ein positiver Wert bewegt das Element zum Betrachter hin, ein negativer Wert weiter weg.

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

In diesem Beispiel werden zwei Boxen erstellt. Eine ist normal auf der Seite positioniert, ohne überhaupt übersetzt zu werden. Die zweite wird verändert, indem Perspektive angewendet wird, um einen 3D-Raum zu schaffen, und dann zum Benutzer hin bewegt wird.

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

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

Wichtig ist hier die Klasse "moved"; sehen wir uns an, was sie bewirkt. Zuerst positioniert die Funktion perspective() den Betrachter relativ zur Ebene, die dort liegt, wo z=0 (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass der Benutzer sich 500 Pixel "vor" der Darstellung befindet, die sich an z=0 befindet.

Dann bewegt die Funktion translateZ() das Element 200 Pixel "aus dem Bildschirm heraus", zum Benutzer hin. Dies hat den Effekt, dass das Element bei Betrachtung auf einem 2D-Display größer erscheint oder bei Verwendung eines VR-Headsets oder eines anderen 3D-Displaygeräts näher wirkt.

Beachten Sie, dass das transformierte Element nicht sichtbar ist, wenn der perspective()-Wert kleiner als der translateZ()-Wert ist, wie z. B. transform: perspective(200px) translateZ(300px);, da es weiter entfernt als der Benutzer-Blickwinkel ist. Je kleiner der Unterschied zwischen den Perspektiven- und translateZ-Werten ist, desto näher ist der Benutzer am Element, und desto größer wird das übersetzte Element erscheinen.

• transform
• <transform-function>
• translate