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 ein <length> definiert, das angibt, wie weit nach innen oder außen sich das Element oder die Elemente bewegen.

In den obigen interaktiven Beispielen wurde 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), auf den Würfel gesetzt.

tz

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

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

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

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

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

Wirklich wichtig ist hier die Klasse "moved"; lassen Sie uns ansehen, was sie tut. Zuerst positioniert die perspective() Funktion den Betrachter relativ zur Ebene, die dort liegt, wo z=0 ist (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass der Benutzer 500 Pixel "vor" der Darstellung bei z=0 ist.

Dann bewegt die translateZ() Funktion das Element 200 Pixel "auswärts" vom Bildschirm, in Richtung des Benutzers. Dies hat zur Folge, dass das Element auf einem 2D-Display größer erscheint oder bei Ansicht mit einem VR-Headset oder anderen 3D-Anzeigegeräten näher wirkt.

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

• transform
• <transform-function>
• translate