translateZ() CSS-Funktion

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, das angibt, wie weit das Element oder die Elemente nach innen oder außen bewegt werden.

In den oben genannten 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 dem Würfel gesetzt.

Syntax

translateZ(tz)

Werte

tz

Ein <length>, das die z-Komponente des Translationsvektors [0, 0, tz] darstellt. Im kartesischen Koordinatensystem repräsentiert es die Verschiebung entlang der Z-Achse. Ein positiver Wert bewegt das Element in Richtung des Betrachters, und ein negativer Wert weiter weg.

Formale Syntax

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

Beispiele

In diesem Beispiel werden zwei Boxen erstellt. Eine wird normal auf der Seite positioniert, ohne überhaupt übersetzt zu werden. Die zweite wird durch Anwendung der 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;
}

Das wirklich Wesentliche hier ist die Klasse "moved"; schauen wir, was sie macht. Zuerst positioniert die perspective() Funktion den Betrachter relativ zu der Ebene, die sich dort befindet, wo z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass der Benutzer sich 500 Pixel "vor" dem Bildmaterial befindet, das sich bei z=0 befindet.

Dann bewegt die translateZ() Funktion das Element 200 Pixel "nach außen" vom Bildschirm, in Richtung des Benutzers. Dies hat zur Folge, 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 betrachtet wird.

Beachten Sie, dass, wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie in transform: perspective(200px) translateZ(300px);, das transformierte Element nicht sichtbar sein wird, da es weiter als das Benutzer-Viewport entfernt ist. 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.

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• transform
• <transform-function>
• translate