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 in CSS ermöglicht es Ihnen, ein Element zu drehen, zu skalieren, zu verzerren oder zu verschieben. Sie verändert den Koordinatenraum des CSS-visuellen Formatierungsmodells.

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

Sie können auch die einzelnen Transformationseigenschaften verwenden: translate, rotate und scale. Diese Eigenschaften werden in der Reihenfolge angewendet: translate, rotate, scale und schließlich transform.

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

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>

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-Transformationsfunktionen, 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.
none: Gibt an, dass keine Transformation angewendet werden soll.

Barrierefreiheit

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 eine Möglichkeit bieten, um den Nutzern zu ermöglichen, Animationen auszuschalten, vorzugsweise webseitenweit.

Erwägen Sie außerdem, die Medienfunktion prefers-reduced-motion zu verwenden — nutzen Sie diese, um eine Medienabfrage zu schreiben, die Animationen ausschaltet, falls der Nutzer in seinen Systemeinstellungen reduzierte Animationen angegeben 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

Transformationsreihenfolge

Die Reihenfolge der Transformationsfunktionen ist wichtig. In diesem Beispiel werden zwei Boxen durch die gleichen Werte 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: #cccccc;
}
.two {
  background-color: #d6bb72;
}

css

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

Ergebnis

Wenn ein Element vor der Verschiebung gedreht wird, erfolgt die Übersetzungsrichtung auf der gedrehten Achse. Die Achse ist durch die gepunkteten Linien angezeigt.

Weitere Beispiele

Sehen Sie sich Using CSS transforms 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

Using CSS transforms
<transform-function> Datentyp mit Erklärungen zu allen Transformationsfunktionen.
Individuelle CSS-Eigenschaften: translate, rotate und scale (es gibt keine skew-Eigenschaft).
SVG-Attribut transform
Online-Tool zur Visualisierung von CSS-Transformationsfunktionen: CSS Transform Playground

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden