translateZ()

Die CSS-Funktion translateZ() positioniert ein Element entlang der Z-Achse im 3D-Raum neu, d. h. näher zum Betrachter hin oder weiter von ihm weg. Ihr Ergebnis ist ein <transform-function> Datentyp.

Diese Transformation wird durch einen <length>-Wert definiert, der angibt, wie weit sich das Element oder die Elemente nach innen oder nach außen bewegen.

In den obigen interaktiven Beispielen wurden die Werte perspective: 550px; (en-US) gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d; (en-US), damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.

Hinweis: translateZ(tz) ist gleichzusetzen mit translate3d (en-US)(0, 0, tz).

Syntax

translateZ(tz)

Werte

tz
Ein <länge> Wert, der die Z-Komponente des Verschiebungsvektors darstellt. Ein positiver Wert verschiebt das Element zum Betrachter hin, ein negativer Wert weiter vom Betrachter weg.
Kartesische Koordinaten auf ℝ2 Homogene Koordinaten auf ℝℙ2 Kartesische Koordinaten auf ℝ3 Homogene Koordinaten auf ℝℙ3
Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden. Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 10000100001t0001

Beispiel

In diesem Beispiel werden zwei Boxen erstellt. Einer wird normal auf der Seite positioniert, ohne dass er übersetzt wird. Der zweite wird durch Anwendung der Perspektive verändert, um einen 3D-Raum zu erzeugen, und dann in Richtung des Benutzers 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;
}

Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion perspective() (en-US) den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.

Dann verschiebt die Funktion translateZ() das Element um 200 Pixel vom Bildschirm "nach außen", in Richtung des Benutzers. 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-Anzeigegerät betrachtet wird.

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

Ergebnis

Specifications

Spezifikation Status Kommentar
CSS Transforms Level 2
Die Definition von 'transform' in dieser Spezifikation.
Bearbeiterentwurf Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch