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
128
129
130
131
132
133
134
135
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>
{{CSSSyntax}}
<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>
|
