translateZ()

Probieren Sie es aus

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, welches angibt, wie weit das Element oder die Elemente einwärts oder auswärts bewegt werden.

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, auch im 3D-Raum positioniert sind) auf den Würfel gesetzt.

Syntax

translateZ(tz)

Werte

tz

Ein <length> das die z-Komponente des Übersetzungsvektors [0, 0, tz] darstellt. Im kartesischen Koordinatensystem stellt es eine Verschiebung entlang der z-Achse dar. Ein positiver Wert bewegt das Element näher an den Betrachter heran, und ein negativer Wert weiter weg.

Formale Syntax

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

Beispiele

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

HTML

<div>Static</div>
<div class="moved">Moved</div>

CSS

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

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

Worauf es hier wirklich ankommt, ist die Klasse "moved"; sehen wir uns an, was sie macht. Zuerst positioniert die perspective() Funktion den Betrachter relativ zur Ebene, die sich dort befindet, wo z=0 ist (im Wesentlichen der Bildschirmoberfläche). Ein Wert von 500px bedeutet, dass der Benutzer 500 Pixel "vor" der Grafik ist, die sich bei z=0 befindet.

Dann verschiebt die translateZ() Funktion das Element 200 Pixel "aus der Tiefe" des Bildschirms, in Richtung des Betrachters. Dies hat zur Folge, dass das Element, wenn es auf einem 2D-Display betrachtet wird, größer erscheint, oder wenn es mit einem VR-Headset oder einem anderen 3D-Display-Gerät betrachtet wird, näher erscheint.

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 ist, da es außerhalb des Sichtfeldes des Benutzers liegt. Je kleiner der Unterschied zwischen den Perspektiv- und translateZ-Werten ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• transform
• <transform-function>
• translate