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 Ihnen, ein Element zu drehen, zu skalieren, zu schrägstellen oder zu verschieben. Sie modifiziert den Koordinatenraum des CSS-visuellen Formatierungsmodells.

Probieren Sie es aus

Wenn die Eigenschaft einen anderen Wert als none hat, wird ein Stacking Context erstellt. In diesem Fall wird das Element als Containting Block für alle darin enthaltenen position: fixed; oder position: absolute;-Elemente fungieren.

Warnung: Nur transformierbare Elemente können transformiert werden. Das heißt, alle Elemente, deren Layout durch das CSS-Box-Modell bestimmt 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 ein oder mehrere <transform-function>-Werte angegeben werden.

Werte

<transform-function>: Eine oder mehrere der CSS-Transform-Funktionen, die angewendet werden sollen. Die Transformationsfunktionen werden in der Reihenfolge von links nach rechts multipliziert, das heißt, zusammengesetzte Transformationen werden effektiv in der Reihenfolge von rechts nach links angewendet.
none: Gibt an, dass keine Transformation angewendet werden soll.

Barrierefreiheit

Skalierungs-/Zoom-Animationen sind problematisch für die Barrierefreiheit, da sie eine häufige Ursache für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen auf Ihrer Webseite einfügen müssen, sollten Sie eine Kontrolle bereitstellen, mit der Nutzer Animationen ausschalten können, vorzugsweise für die gesamte Seite.

Berücksichtigen Sie auch die Nutzung der prefers-reduced-motion Medienfunktion — nutzen Sie sie, um eine Media Query zu schreiben, die Animationen deaktiviert, wenn der Nutzer in seinen Systemeinstellungen eine reduzierte Animation angegeben hat.

Erfahren Sie mehr:

Formale Definition

Initialer Wert	`none`
Anwendbar auf	transformierbare Elemente
Vererbt	Nein
Prozentwerte	bezieht sich auf die Größe der äußeren Box
Berechneter Wert	relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	Transformation
Erstellt Stapelkontext	Ja

Formale Syntax

transform = 
  none              |
  <transform-list>  

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

Beispiele

Übersetzen und Drehen 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

Transformationsreihenfolge

Die Reihenfolge der Transformationsfunktionen ist wichtig. In diesem Beispiel werden zwei Boxen um die gleichen Werte gedreht und verschoben; nur die Reihenfolge der Transformationsfunktionen unterscheidet sich.

HTML

html

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

CSS

div {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 200px;
  top: 50px;
  font-size: 4rem;
  line-height: 200px;
  text-align: center;
}
.original {
  border: 1px dashed;
}
.original:before,
.original:after {
  content: "";
  position: absolute;
  top: 100px;
  width: 500px;
  left: -150px;
  height: 1px;
  border-top: 2px dotted;
}
.original:after {
  transform: rotate(135deg);
}
.one {
  background-color: #ccc;
}
.two {
  background-color: #d6bb72;
}

css

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

Ergebnis

Wenn ein Element vor dem Verschieben gedreht wird, befindet sich die Verschieberichtung auf der gedrehten Achse. Die Achse ist durch die gestrichelten Linien angezeigt.

Weitere Beispiele

Bitte sehen Sie Using CSS transforms und <transform-function> für weitere Beispiele.

Spezifikationen

Specification
CSS Transforms Module Level 2 # transform-functions
CSS Transforms Module Level 1 # transform-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Using CSS transforms
<transform-function> Datentyp mit allen erklärten Transformationsfunktionen.
Einzelne CSS-Eigenschaften: translate, rotate, und scale (es gibt keine skew-Eigenschaft).
Online-Tool zur Visualisierung von CSS-Transformationsfunktionen: CSS Transform Playground