dump 2020-12-11

1 files changed, 128 insertions, 0 deletions

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()
+---
+<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("&lt;transform-function&gt;")}} 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("&lt;length&gt;")}}-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("&lt;Länge&gt;")}} 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">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;</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>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<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("&lt;transform-function&gt;")}}</li>
+</ul>