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ägen oder zu verschieben. Sie verändert den Koordinatenraum des CSS-visuellen Formatierungsmodells.

Probieren Sie es aus

transform: matrix(1, 2, 3, 4, 5, 6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Hat die Eigenschaft einen anderen Wert als none, wird ein Stapelformkontext erstellt. In diesem Fall wird das Element als begrenzender Block für alle position: fixed; oder position: absolute; Elemente fungieren, die es enthält.

Warnung: Nur transformierbare Elemente können transformiert werden. Das heißt, alle Elemente, deren Layout vom CSS-Boxmodell bestimmt wird, mit Ausnahme von: nicht ersetzten Inline-Boxen, Tabellenspalten-Boxen und Tabellen-Spaltengruppen-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 Schlüsselwort none oder als eine oder mehrere <transform-function>-Werte angegeben werden.

Werte

<transform-function>: Eine oder mehrere der CSS-Transformationsfunktionen, die angewendet werden sollen. Die Transformationsfunktionen werden von links nach rechts multipliziert, was bedeutet, dass zusammengesetzte Transformationen effektiv 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 weit verbreitete Auslöser für bestimmte Arten von Migräne sind. Wenn auf Ihrer Website solche Animationen enthalten sein müssen, sollten Sie eine Steuerung bereitstellen, mit der Benutzer Animationen ausschalten können, vorzugsweise auf der gesamten Website.

Berücksichtigen Sie auch die Verwendung der prefers-reduced-motion Media-Feature — verwenden Sie sie, um eine Media-Abfrage zu schreiben, die Animationen ausschaltet, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animationen festgelegt hat.

Erfahren Sie mehr:

Formale Definition

Anfangswert	`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

Reihenfolge der Transformationen

Die Reihenfolge der Transformationsfunktionen ist wichtig. In diesem Beispiel werden zwei Boxen mit den gleichen Werten gedreht und verschoben; nur die Reihenfolge der Transformationsfunktionen ist unterschiedlich.

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 gedreht wird, bevor es verschoben wird, ist die Verschieberichtung auf 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

Siehe auch

Verwendung von CSS-Transformationen
<transform-function> Datentyp mit Erklärungen zu allen Transformationsfunktionen.
Einzelne CSS-Eigenschaften: translate, rotate, und scale (es gibt keine skew-Eigenschaft).
SVG-transform-Attribut
Online-Tool zum Visualisieren von CSS-Transformationsfunktionen: CSS Transform Playground