transform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die transform-Eigenschaft (CSS) ermöglicht es, ein Element zu rotieren, zu skalieren, zu scheren oder zu verschieben. Sie verändert den Koordinatenraum des CSS-visuellen Formatierungsmodells.

Probieren Sie es aus

Wenn die Eigenschaft einen anderen Wert als none besitzt, wird ein Stacking-Kontext erstellt. In diesem Fall fungiert das Element als Enthalten der Block für alle position: fixed;- oder position: absolute;-Elemente, die es enthält.

Warnung: Nur transformierbare Elemente können transformiert werden. Das heißt, alle Elemente, deren Layout durch das CSS-Box-Modell geregelt wird, mit Ausnahme von: nicht-ersetzten Inline-Boxen, Tabellenspalten-Boxen und Tabellenspalten-Gruppen-Boxen.

Syntax

css
/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
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, 3, 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) translate3d(10px, 0, 20px) rotateY(30deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

Die transform-Eigenschaft kann entweder als das Schlüsselwort none oder als eine oder mehrere <transform-function>-Werte angegeben werden.

Werte

<transform-function>

Eine oder mehrere CSS-Transform-Funktionen, die angewendet werden sollen. Die Transform-Funktionen werden von links nach rechts multipliziert, was bedeutet, dass zusammengesetzte Transformationen effektiv in umgekehrter Reihenfolge, von rechts nach links, angewendet werden.

none

Gibt an, dass keine Transformation angewendet werden soll.

Barrierefreiheit

Skalierungs-/Zoom-Animationen sind problematisch für die Barrierefreiheit, da sie eine häufige Auslöser für bestimmte Arten von Migräne darstellen. Wenn Sie solche Animationen auf Ihrer Website einbauen müssen, sollten Sie eine Möglichkeit bereitstellen, damit Benutzer Animationen deaktivieren können, idealerweise siteweit.

Berücksichtigen Sie außerdem die Nutzung der prefers-reduced-motion Media-Feature — verwenden Sie diese, um eine Media Query zu schreiben, die Animationen deaktiviert, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animation eingestellt hat.

Weitere Informationen:

Formale Definition

Anfangswertnone
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwertebezieht sich auf die Größe der äußeren Box
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
AnimationstypTransformation
Erstellt StapelkontextJa

Formale Syntax

transform = 
none |
<transform-list>

<transform-list> =
<transform-function>+

Beispiele

Verschieben und Rotieren eines Elements

HTML

html
<div>Transformed element</div>

CSS

css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

Ergebnis

Reihenfolge der Transformationen

Die Reihenfolge der Transform-Funktionen ist wichtig. In diesem Beispiel werden zwei Kästen mit denselben Werten rotiert und verschoben; nur die Transform-Funktionsreihenfolge unterscheidet sich.

HTML

html
<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>

CSS

css
.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

Ergebnis

Wenn ein Element vor der Verschiebung rotiert wird, erfolgt die Verschiebung entlang der gedrehten Achse. Dies wird durch die gestrichelten Linien angezeigt.

Weitere Beispiele

Bitte sehen Sie sich Verwendung von CSS-Transformationen und <transform-function> für weitere Beispiele an.

Spezifikationen

Specification
CSS Transforms Module Level 2
# transform-functions
CSS Transforms Module Level 1
# transform-property
Scalable Vector Graphics (SVG) 2
# TransformProperty

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transform
3D support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch