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

In den obigen interaktiven Beispielen wurden 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 angewendet.

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, und ein negativer Wert weiter weg.

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

In diesem Beispiel werden zwei Boxen erstellt. Eine wird normal auf der Seite positioniert, ohne dass sie überhaupt übersetzt wird. Die zweite wird durch die Anwendung von Perspektive verändert, um einen 3D-Raum zu schaffen, und dann zum Benutzer hin 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"; sehen wir uns an, was sie bewirkt. Zunächst positioniert die perspective() Funktion den Betrachter relativ zur Ebene, die da liegt, wo z=0 (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass der Benutzer 500 Pixel "vor" dem Bildmaterial ist, das bei z=0 liegt.

Dann bewegt die translateZ() Funktion das Element 200 Pixel "aus dem Bildschirm heraus" zum Benutzer hin. Dies hat den Effekt, dass das Element größer erscheint, wenn es auf einem 2D-Display betrachtet wird, oder näher, wenn es mit einem VR-Headset oder einem anderen 3D-Display-Gerät angesehen wird.

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

• transform
• <transform-function>
• translate