---
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#&lt;transform-function>">&lt;transform-function&gt;</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="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</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">&lt;div&gt;Transformed element&lt;/div&gt;</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("&lt;transform-function&gt;")}}.</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("&lt;transform-function&gt;")}} 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>