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 nach innen oder außen 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, ebenfalls 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 repräsentiert es die Verschiebung entlang der z-Achse. Ein positiver Wert bewegt das Element zum Betrachter hin, 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 die Anwendung 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"; lassen Sie uns einen Blick darauf werfen, was sie bewirkt. 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 sich 500 Pixel "vor" dem Bild befindet, das sich bei z=0 befindet.

Dann bewegt die translateZ() Funktion das Element 200 Pixel "aus" dem Bildschirm, in Richtung des Benutzers. Dies hat die Wirkung, dass das Element auf einem 2D-Display größer erscheint oder näher erscheint, wenn es mit einem VR-Headset oder einem anderen 3D-Display-Gerät betrachtet wird.

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• transform
• <transform-function>
• translate