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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: transform
slug: Web/CSS/transform
tags:
- CSS
- CSS-Eigenschaft
- Referenz
- Transfomation
- 'recipe:css-property'
translation_of: Web/CSS/transform
---
<div>{{CSSRef}}</div>
<p>Mit der <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft <strong><code>transform</code></strong> können Sie ein Element drehen, skalieren, schräg stellen oder übersetzen. Sie modifiziert den Koordinatenraum des CSS <a href="/de/docs/Web/CSS/Visual_formatting_model">visuellen Formatierungsmodells</a>.</p>
<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
<p>Wenn die Eigenschaft einen anderen Wert als <code>none</code> hat, wird ein <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapelkontext</a> erstellt. In diesem Fall fungiert das Element als ein enthaltender Block für alle <code>position: fixed;</code> oder <code>position: absolute;</code> Elemente, die es enthält.</p>
<div class="warning">
<p>Nur transformierbare Elemente können transformiert werden. Das heißt, alle Elemente, deren Layout durch das CSS-Box-Modell geregelt wird, mit Ausnahme von: <a href="/de/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">nicht ersetzten Inline-Boxen</a>, <a href="/de/docs/Web/HTML/Element/col">Tabellen-Spalten-Boxen</a> und <a href="/de/docs/Web/HTML/Element/colgroup">Tabellen-Spalten-Gruppen-Boxen</a>.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css notranslate">/* Keyword values */
transform: none;
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* Global values */
transform: inherit;
transform: initial;
transform: unset;
</pre>
<p>Die Eigenschaft <code>transform</code> kann entweder als Schlüsselwortwert <code><a href="/de/docs/Web/CSS/transform$edit#none">none</a></code> oder mehrere<code><a href="/de/docs/Web/CSS/transform$edit#<transform-function>"><transform-function></a></code> -Werte angegeben werden.</p>
<div class="blockIndicator note">
<p><strong>Hinweis:</strong> Wenn {{cssxref("transform-function/perspective", "perspective()")}} einer von mehreren Funktionswerten ist, muss er zuerst aufgeführt werden.</p>
</div>
<h3 id="Werte">Werte</h3>
<dl>
<dt id="<transform-function>">{{cssxref("<transform-function>")}}</dt>
<dd>Eine oder mehrere der <a href="/de/docs/Web/CSS/transform-function">CSS-Transformationsfunktionen</a>, die angewendet werden sollen. Die Transformationsfunktionen werden in der Reihenfolge von links nach rechts multipliziert, was bedeutet, dass zusammengesetzte Transformationen effektiv in der Reihenfolge von rechts nach links angewendet werden.</dd>
<dt id="none"><code>none</code></dt>
<dd>Specifies that no transform should be applied.</dd>
</dl>
<h2 id="Bedenken_hinsichtlich_der_Zugänglichkeit">Bedenken hinsichtlich der Zugänglichkeit</h2>
<p>Skalierungs-/Zoom-Animationen sind problematisch für die Barrierefreiheit, da sie ein häufiger Auslöser für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen auf Ihrer Website einbinden müssen, sollten Sie ein Steuerelement bereitstellen, mit dem Benutzer Animationen abschalten können, vorzugsweise site-wide.</p>
<p>Ziehen Sie außerdem in Erwägung, die Medienfunktion {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} zu nutzen - verwenden Sie sie, um eine <a href="/de/docs/Web/CSS/Media_Queries">Media Queries</a> zu schreiben, die Animationen ausschaltet, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animationen angegeben hat.</p>
<p>Erfahren Sie mehr:</p>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
</ul>
<h2 id="Formale_Definition">Formale Definition</h2>
<p>{{CSSInfo}}</p>
<h2 id="Formale_Syntax">Formale Syntax</h2>
{{csssyntax}}
<h2 id="Beispiel">Beispiel</h2>
<h3 id="Translating_and_rotating_an_element" name="Translating_and_rotating_an_element">Verschieben und Drehen eines Elements</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>Transformed element</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}</pre>
<h4 id="Ergebnis">Ergebnis</h4>
<p>{{EmbedLiveSample("Translating_and_rotating_an_element", "400", "160")}}</p>
<h3 id="Mehr_Beispiele">Mehr Beispiele</h3>
<p>Weitere Beispiele finden Sie unter <a href="/de/docs/Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden">Verwendung von CSS-Transformationen</a> und {{cssxref("<transform-function>")}}.</p>
<ul>
</ul>
<h2 id="Spezifikationen">Spezifikationen</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>Zusätzliche 3D Transformationsfunctionen.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
<td>{{Spec2('CSS3 Transforms')}}</td>
<td>Ursprünglich 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="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.properties.transform")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/CSS/Using_CSS_transforms">Verwendung von CSS-Transformationen</a></li>
<li>{{cssxref("<transform-function>")}} Datentyp mit allen Transformationsfunktionen erklärt.</li>
<li>Online-Tool zur Visualisierung von CSS Transformationsfunktionen: <a href="https://css-transform.moro.es/">CSS Transform Playground</a></li>
<li>{{cssxref ('matrix')}}</li>
<li>{{cssxref ('matrix3d')}}</li>
<li>{{cssxref ('perspective')}}</li>
<li>{{cssxref ('rotate')}}</li>
<li>{{cssxref ('scale')}}</li>
<li>{{cssxref ('skew')}}</li>
</ul>
|
