dump 2020-12-11

1 files changed, 123 insertions, 0 deletions

diff --git a/files/de/web/css/transform-function/translatey()/index.html b/files/de/web/css/transform-function/translatey()/index.html
new file mode 100644
index 0000000000..a364b79966
--- /dev/null
+++ b/files/de/web/css/transform-function/translatey()/index.html
@@ -0,0 +1,123 @@
+---
+title: translateY()
+slug: Web/CSS/transform-function/translateY()
+tags:
+  - CSS
+  - CSS Funktion
+  - CSS Transfomation
+  - Funktion
+  - Referenz
+translation_of: Web/CSS/transform-function/translateY()
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Funktion <strong><code>translateY()</code></strong> positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("&lt;transform-function&gt;")}} Datentyp.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> <code>translateY(ty)</code> ist dasselbe wie <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(0, ty)</code> oder <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, ty, 0)</code>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* &lt;length-percentage&gt; values */
+transform: translateY(200px);
+transform: translateY(50%);
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.</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="1" rowspan="2">
+    <p>Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></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>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 0 t]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">translateY({{cssxref("&lt;length-percentage&gt;")}})
+</pre>
+
+<h2 id="Examples" name="Examples">Beispiel</h2>
+
+<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;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Examples", 250, 250)}}</p>
+
+<h2 id="Spezifikation">Spezifikation</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("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Ursprüngliche Definition</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="Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.">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="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("translate")}}</li>
+ <li><code><a href="/de/docs/Web/CSS/transform-function/translateX">translateX()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>