From ba5d6f9610d6bb352eecfa3ded1bb99bc9892916 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 11 Dec 2020 19:00:14 -0500 Subject: dump 2020-12-11 --- .../css/transform-function/translatez()/index.html | 128 +++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/de/web/css/transform-function/translatez()/index.html (limited to 'files/de/web/css/transform-function/translatez()') diff --git a/files/de/web/css/transform-function/translatez()/index.html b/files/de/web/css/transform-function/translatez()/index.html new file mode 100644 index 0000000000..27e86335fd --- /dev/null +++ b/files/de/web/css/transform-function/translatez()/index.html @@ -0,0 +1,128 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ() +tags: + - 3D + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

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 {{cssxref("<transform-function>")}} Datentyp.

+ +
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+ + + +

Diese Transformation wird durch einen {{cssxref("<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; gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d;, 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(0, 0, tz).

+
+ +

Syntax

+ +
translateZ(tz)
+
+ +

Werte

+ +
+
tz
+
Ein {{cssxref("<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 ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene 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() 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

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf