Dietransform-Eigenschaft vonCSS ermöglicht es Ihnen, ein Element zu rotieren, skalieren, schräg zu stellen oder zu verschieben.Sie verändert den Koordinatenraum des CSS-visuellen Formatmodells.

Wenn die Eigenschaft einen anderen Wert alsnone hat, wird einStacking-Kontext erstellt.In diesem Fall fungiert das Element alsEnthaltender Block für alleposition: fixed; oderposition: absolute; Elemente, die es enthält.

Sie können auch die einzelnen Transformations-Eigenschaften verwenden:translate,rotate undscale. Diese Eigenschaften werden in der Reihenfolge angewendet:translate,rotate,scale und schließlichtransform.

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>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

Syntax

/* 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;

Dietransform-Eigenschaft kann entweder als das Schlüsselwortnone oder als eine oder mehrere<transform-function> Werte angegeben werden.

Werte

<transform-function>

Eine oder mehrere derCSS-Transformationsfunktionen, die angewendet werden sollen.Die Transformationsfunktionen werden in der Reihenfolge von links nach rechts multipliziert, was bedeutet, dass zusammengesetzte Transformationen effektivin 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 Steuerung bereitstellen, um Benutzern die Möglichkeit zu geben, Animationen auszuschalten, vorzugsweise für die gesamte Website.

Erwägen Sie auch die Verwendung derprefers-reduced-motion-Medienfunktion — nutzen Sie diese, um eineMedienabfrage zu schreiben, die Animationen ausschaltet, wenn der Benutzer eine reduzierte Animation in seinen Systemeinstellungen angegeben hat.

Erfahren Sie mehr:

• MDN Verständnis von WCAG, Leitlinie 2.3 Erklärungen
• Verständnis der Erfolgskriterien 2.3.3 | W3C Verständnis WCAG 2.1

Formale Definition

Formale Syntax

transform =
none|
<transform-list>

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

Beispiele

Übersetzen und Drehen eines Elements

HTML

<div>Transformed element</div>

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 ist unterschiedlich.

HTML

<div></div><div>1</div><div>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;}

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

Ergebnis

Wenn ein Element gedreht wird, bevor es verschoben wird, liegt die Verschieberichtung auf der gedrehten Achse. Die Achse wird durch die gepunkteten Linien angezeigt.

Weitere Beispiele

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Transformationen
• <transform-function> Datentyp mit allen erklärten Transformationsfunktionen.
• Einzelne CSS-Eigenschaften:translate,rotate undscale (es gibt keineskew-Eigenschaft).
• SVGtransform-Attribut
• Online-Tool zur Visualisierung von CSS-Transform-Funktionen:CSS Transform Playground