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 CSS-Eigenschaft ermöglicht es Ihnen, ein Element zu rotieren, zu skalieren, zu kippen oder zu verschieben. Sie modifiziert den Koordinatenraum des CSS-visuellen Formatierungsmodells.

Wenn die Eigenschaft einen anderen Wert als none hat, wird ein Stacking-Kontext erstellt. In diesem Fall fungiert das Element als umschließender Block für alle darin enthaltenen Elemente mit position: fixed; oder position: absolute;.

Sie können auch die individuellen Transform-Eigenschaften 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 bedeutet, alle Elemente, deren Layout vom CSS-Boxmodell bestimmt wird, mit Ausnahme von: nicht-ersetzten Inline-Boxen, Tabellenspaltenboxen und Tabellen-Spaltengruppenboxen.

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 Schlüsselwortwert none oder als ein oder mehrere <transform-function>-Werte spezifiziert werden.

Werte

<transform-function>: Eine oder mehrere der CSS-Transform-Funktionen, die angewendet werden sollen. Die Transform-Funktionen werden 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 einfügen müssen, sollten Sie eine Steuerung bereitstellen, die Benutzern die Möglichkeit gibt, Animationen abzuschalten, vorzugsweise auf der gesamten Website.

Überlegen Sie auch, die prefers-reduced-motion-Medienfunktion zu verwenden — nutzen Sie sie, um eine Media Query zu schreiben, die Animationen deaktiviert, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animation 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 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 Boxen mit den gleichen Werten rotiert und verschoben; nur die Reihenfolge der Transform-Funktionen 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 Translation rotiert wird, befindet sich die Translationsrichtung auf der rotierten Achse. Die Achse wird durch die gepunkteten Linien angezeigt.

Weitere Beispiele

Bitte siehe Verwendung von CSS-Transformationen und <transform-function> für weitere Beispiele.

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 allen erklärten Transform-Funktionen.
Individuelle CSS-Eigenschaften: translate, rotate, und scale (es gibt keine skew-Eigenschaft).
SVG-transform-Attribut
Online-Tool zur Visualisierung von CSS-Transform-Funktionen: 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