initial commit

2 files changed, 400 insertions, 0 deletions

diff --git a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html
new file mode 100644
index 0000000000..83a9ada0d2
--- /dev/null
+++ b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html
@@ -0,0 +1,248 @@
+---
+title: CSS Transformationen verwenden
+slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden
+tags:
+  - CSS
+  - CSS Transformationen
+  - CSS3
+  - Fortgeschritten
+  - Guide
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>Durch Modifizierung des Koordinatenraums ändern <strong>CSS Transformationen</strong> den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.</p>
+
+<p>CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.</p>
+
+<h2 id="CSS_Transformationseigenschaften">CSS Transformationseigenschaften</h2>
+
+<p>Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Drehung">Drehung</h3>
+
+<p>Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.</p>
+
+<p><a class="button liveSample" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Livebeispiel ansehen</a> <a class="button liveSample" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Screenshot des Beispiels ansehen</a></p>
+
+<pre class="brush: html">&lt;div style="transform: rotate(90deg); transform-origin: bottom left;"&gt;
+  &lt;iframe src="http://www.google.com/" width="500" height="600"&gt;&lt;/iframe&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Verzerrung_und_Verschiebung">Verzerrung und Verschiebung</h3>
+
+<p>Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.</p>
+
+<p><a class="button liveSample" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Livebeispiel ansehen</a>  <a class="button liveSample" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">Screenshot des Beispiels ansehen</a></p>
+
+<pre class="brush: html">&lt;div style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"&gt;
+  &lt;iframe src="http://www.google.com/" width="600" height="500"&gt;&lt;/iframe&gt;
+&lt;/div&gt;
+</pre>
+
+<h2 id="3D-spezifische_CSS_Eigenschaften">3D-spezifische CSS Eigenschaften</h2>
+
+<p>Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.</p>
+
+<h3 id="Eine_Perspektive_einrichten">Eine Perspektive einrichten</h3>
+
+<p>Das erste Element ist das Setzen der <em>Perspektive</em>. Die Perspektive ist, was den dreidimensionalen Eindruck vermittelt. Je weiter weg Elemente vom Betrachter sind, desto kleiner sind sie.</p>
+
+<p>Wie schnell sie kleiner werden, wird durch die {{cssxref("perspective")}} Eigenschaft bestimmt. Je kleiner deren Wert ist, desto tiefer ist die Perspektive.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>perspective:0;</code></th>
+   <th><code>perspective:250px;</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 0; -webkit-perspective: 0; perspective: 0; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective-origin: 150% 150%; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 250px; -webkit-perspective: 250px; perspective: 250px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective-origin: 150% 150%; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>perspective:300px;</code></th>
+   <th><code>perspective:350px;</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 350px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 350px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 350px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Das zweite Element ist die Konfiguration der Position des Betrachters mittels der {{cssxref("perspective-origin")}} Eigenschaft. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer passend ist.</p>
+
+<div>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>perspective-origin:150px 150px;</code></th>
+   <th><code>perspective-origin:50% 50%;</code></th>
+   <th><code>perspective-origin:-50px -50px;</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 50% 50%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 50% 50%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 50% 50%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: -50% -50%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: -50% -50%; perspective: 300px; transform-style: preserve-3d; perspective-origin: -50% -50%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Sobald dies getan ist, kann mit der Arbeit am Element im dreidimensionalen Raum begonnen werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/Events/Gerätausrichtung_mit_3D_Transformationen_verwenden">Gerätausrichtung mit 3D Transformationen verwenden</a></li>
+ <li><a href="http://desandro.github.com/3dtransforms/">Einführung in CSS 3D Transformationen</a> (Blogeintrag von David DeSandro in Englisch)</li>
+</ul>
diff --git a/files/de/web/css/css_transforms/index.html b/files/de/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..142b07aed1
--- /dev/null
+++ b/files/de/web/css/css_transforms/index.html
@@ -0,0 +1,152 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - CSS
+  - CSS Reference
+  - Experimental
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Transforms
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt>
+ <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transforms') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+     36</p>
+   </td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td>
+   <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
+    10.0</td>
+   <td>10.5{{property_prefix("-o")}}<br>
+    12.10<br>
+    15.0{{property_prefix("-webkit")}}<br>
+    23</td>
+   <td>3.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>12.0{{property_prefix("-webkit")}}<br>
+    36</td>
+   <td>10.0{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10.0</td>
+   <td>15.0{{property_prefix("-webkit")}}<br>
+    23</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>11.5{{property_prefix("-webkit")}}</td>
+   <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>22{{property_prefix("-webkit")}}</td>
+   <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p>
+
+<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("&lt;length&gt;")}}, in addition to the standard {{cssxref("&lt;number&gt;")}}.</p>
+
+<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p>
+
+<p>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p>
+
+<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p>
+
+<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p>
+
+<p> </p>