1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
title: translateZ()
slug: Web/CSS/transform-function/translateZ
tags:
- 3D
- CSS
- CSS Funktion
- CSS Transformation
- Funktion
- Referenz
translation_of: Web/CSS/transform-function/translateZ()
original_slug: Web/CSS/transform-function/translateZ()
---
<div>{{CSSRef}}</div>
<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Funktion <strong><code>translateZ()</code></strong> 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.</p>
<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div>
<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
<p>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.</p>
<p>In den obigen interaktiven Beispielen wurden die Werte <code><a href="/de/docs/Web/CSS/perspective">perspective: 550px;</a></code> gesetzt, um einen 3D-Raum zu erzeugen, und <code><a href="/de/docs/Web/CSS/transform-style">transform-style: preserve-3d;</a></code>, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.</p>
<div class="note">
<p><strong>Hinweis:</strong> <code>translateZ(tz)</code> ist gleichzusetzen mit <code><a href="/de/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, 0, tz)</code>.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox notranslate">translateZ(<var>tz</var>)
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code><var>tz</var></code></dt>
<dd>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.</dd>
</dl>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Kartesische Koordinaten auf ℝ<sup>2</sup></th>
<th scope="col">Homogene Koordinaten auf ℝℙ<sup>2</sup></th>
<th scope="col">Kartesische Koordinaten auf ℝ<sup>3</sup></th>
<th scope="col">Homogene Koordinaten auf ℝℙ<sup>3</sup></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.</td>
<td colspan="1" rowspan="2">Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</td>
<td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
</tr>
</tbody>
</table>
<h2 id="Examples" name="Examples">Beispiel</h2>
<p>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.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div>Static</div>
<div class="moved">Moved</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">div {
position: relative;
width: 60px;
height: 60px;
left: 100px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translateZ(200px);
background-color: pink;
}
</pre>
<p>Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion <a href="/de/docs/Web/CSS/transform-function/perspective">perspective()</a> den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von <code>500px</code> bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.</p>
<p>Dann verschiebt die Funktion <a href="/de/docs/Web/CSS/transform-function/translateZ()">translateZ()</a> 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.</p>
<p>Beachten Sie, wenn der <code>perspective()</code>-Wert kleiner ist als der <code>translateZ()</code>-Wert, wie z.B. <code>transform: perspective(200px) translateZ(300px);</code> das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von <code>perspective()</code> und <code>translateZ()</code> ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.</p>
<h4 id="Ergebnis">Ergebnis</h4>
<p>{{EmbedLiveSample("Examples", 250, 250)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td>Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.</td>
</tr>
</tbody>
</table>
<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
<p>{{Compat("css.types.transform-function")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/CSS/translate" title="Mit der CSS-Eigenschaft translate CSS können Sie Transformationen einzeln und unabhängig von der Eigenschaft transform angeben. Dies entspricht eher der typischen Verwendung auf der Benutzeroberfläche und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im Transformationswert angegeben werden müssen."><code>translate</code></a></li>
<li><code><a href="/de/docs/Web/CSS/transform-function/translateX()">translateX()</a></code></li>
<li><code><a href="/de/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></li>
<li><code><a href="/de/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("<transform-function>")}}</li>
</ul>
|
