diff options
Diffstat (limited to 'files/de/web/css/translate/index.html')
| -rw-r--r-- | files/de/web/css/translate/index.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/de/web/css/translate/index.html b/files/de/web/css/translate/index.html new file mode 100644 index 0000000000..ab89dae4c4 --- /dev/null +++ b/files/de/web/css/translate/index.html @@ -0,0 +1,136 @@ +--- +title: translate +slug: Web/CSS/translate +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz + - Tranformation +translation_of: Web/CSS/translate +--- +<div>{{CSSRef}}</div> + +<p>Mit der <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft <strong><code>translate</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> können Sie Transformationen einzeln und unabhängig von der Eigenschaft {{CSSxRef("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.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Standardwert */ +translate: none; + +/* Einzelwert */ +translate: 100px; +translate: 50%; + +/* Zwei Werte */ +translate: 100px 200px; +translate: 50% 105px; + +/* Drei Werte */ +translate: 50% 105px 5rem; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt>Einzelwert {{cssxref("<length-percentage>")}}</dt> + <dd>Ein Einzelwert als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, der eine 2D-Verschiebung angibt, die eine gleiche Verschiebung entlang der X- und Y-Achse spezifiziert. Äquivalent zu einer Funktion <code>translate()</code> (2D-Übersetzung) mit zwei angegebenen Werten.</dd> + <dt>Zwei Werte {{cssxref("<length-percentage>")}}</dt> + <dd>Zwei Werte als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, wobei der erste Wert für die Verschiebung auf der X- und der Zweite auf der Y-Achse steht.</dd> + <dt>Drei Werte {{cssxref("<length-percentage>")}}</dt> + <dd>Zwei Werte als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}} und ein dritter Wert im Format {{cssxref("<length>")}}, die die Verchiebung auf der X-, Y-, und Z-Achse spezifizieren. Entspricht der Funktion {{cssxref("translate3d()")}} (3D-Verschiebung).</dd> + <dt id="none"><code>none</code></dt> + <dd>Gibt an, dass keine Verschiebung angewendet werden soll.</dd> +</dl> + +<h2 id="Formale_Definition">Formale Definition</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div> + <p class="translate">Translation</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + +html { + font-family: sans-serif; +} + +div { + width: 150px; + margin: 0 auto; +} + +p { + padding: 10px 5px; + border: 3px solid black; + border-radius: 20px; + width: 150px; + font-size: 1.2rem; + text-align: center; +} + +.translate { + transition: translate 1s; +} + +div:hover .translate { + translate: 200px 50px; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples')}}</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('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</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><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/translateZ()">translateZ()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li> + <li>{{cssxref('scale')}}</li> + <li>{{cssxref('rotate')}}</li> + <li>{{cssxref('transform')}}</li> +</ul> + +<p>Note: skew is not an independent transform value</p> |