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 positioniert ein Element entlang der z-Achse im 3D-Raum, d.h., näher zum oder weiter vom Betrachter weg. 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 verschoben 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 angewendet.

Note: translateZ(tz) ist äquivalent zu translate3d(0, 0, tz).

Syntax

css
translateZ(tz)

Werte

tz

Ein <length>, das die z-Komponente des verschiebenden Vektors [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.

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 Translation ist keine lineare Transformation in ℝ^3 und kann nicht mit einer kartesischen Koordinatenmatrix dargestellt werden.
(10000100001t0001)\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 ist normal auf der Seite positioniert, ohne jegliche Übersetzung. Die zweite wird verändert, indem eine Perspektive angewendet wird, um einen 3D-Raum zu schaffen, und dann in Richtung des Nutzers verschoben.

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;
}

Worauf es hier wirklich ankommt, ist die Klasse "moved"; schauen wir uns an, was sie macht. 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 Nutzer sich 500 Pixel "vor" dem Bildmaterial befindet, das an z=0 liegt.

Dann bewegt die translateZ() Funktion das Element 200 Pixel "nach außen" vom Bildschirm, in Richtung des Nutzers. Dies hat den Effekt, das Element größer erscheinen zu lassen, 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 als der translateZ() Wert ist, wie bei transform: perspective(200px) translateZ(300px);, das transformierte Element nicht sichtbar sein wird, da es weiter weg als der Blickbereich des Nutzers ist. Je kleiner der Unterschied zwischen den Werten der Perspective und der TranslateZ, desto näher ist der Nutzer am 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. Insbesondere möchten Sie im Allgemeinen, dass perspective() vor translateZ() platziert wird.

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# funcdef-translatez

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
translateZ()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch