translateZ()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Die translateZ() CSS Funktion versetzt ein Element entlang der z-Achse im 3D-Raum, d.h. näher zum oder weiter vom Betrachter entfernt. Ihr Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

Diese Transformation wird durch eine <length> definiert, die angibt, wie weit das Element oder die Elemente nach innen oder außen bewegt werden.

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 werden) auf den Würfel gesetzt.

Hinweis: translateZ(tz) entspricht translate3d(0, 0, tz).

Syntax

css

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 weiter 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 auf der Ebene dargestellt werden.		Eine Übersetzung ist keine lineare Transformation in ℝ^3 und kann nicht mit einer kartesischen Matrix dargestellt werden.	$\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & t \\ 0 & 0 & 0 & 1 \end{array} \right)$

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 das Anwenden von Perspektive verändert, um einen 3D-Raum zu schaffen, und dann zum Benutzer hin bewegt.

HTML

html

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

CSS

css

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 tut. Zuerst positioniert die perspective() Funktion den Betrachter relativ zur Ebene, die dort liegt, wo z=0 (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass der Benutzer 500 Pixel "vor" der an z=0 gelegenen Darstellung ist.

Dann verschiebt die translateZ()-Funktion das Element 200 Pixel "nach außen" vom Bildschirm zum Benutzer hin. Dies hat den Effekt, dass das Element auf einem 2D-Display größer erscheint oder bei Verwendung eines VR-Headsets oder eines anderen 3D-Displaygeräts näher wirkt.

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

Hinweis: Da die Zusammensetzung von Transformationen nicht kommutativ ist, ist die Reihenfolge, in der Sie die verschiedenen Funktionen schreiben, wichtig. Im Allgemeinen sollten Sie perspective() vor translateZ() platzieren.

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2 # funcdef-translatez

Browser-Kompatibilität

BCD tables only load in the browser