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 zutranslate3d(0, 0, tz)
.
Syntax
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. |
|
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
<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"; 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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
translateZ() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support