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 von CSS erlaubt es Ihnen, ein Element zu rotieren, skalieren, scheren oder zu verschieben.
Sie verändert den Koordinatenraum des CSS-visuellen Formatierungsmodells.
Probieren Sie es aus
Wenn die Eigenschaft einen anderen Wert als none
hat, wird ein Stacking-Kontext erstellt.
In diesem Fall fungiert das Element als enthältender Block für alle Elemente mit position: fixed;
oder position: absolute;
, die es enthält.
Warnung:
Nur transformierbare Elemente können transform
iert werden.
Das heißt, alle Elemente, deren Layout durch das CSS-Boxmodell geregelt wird, mit Ausnahme von: nicht ersetzten Inline-Boxen, Tabellenspalten-Boxen und Tabellenspalten-Gruppen-Boxen.
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;
Die transform
-Eigenschaft kann entweder als Schlüsselwortwert 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 von links nach rechts multipliziert, was bedeutet, dass zusammengesetzte Transformationen effektiv in umgekehrter 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 häufig ein 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 es Benutzern ermöglicht, Animationen auszuschalten, vorzugsweise auf der gesamten Seite.
Berücksichtigen Sie auch die Verwendung des prefers-reduced-motion
-Medienmerkmals — verwenden Sie es, um eine Media-Query zu schreiben, die Animationen ausschaltet, wenn der Benutzer reduzierte Animation in seinen Systemeinstellungen 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
<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 Kästchen um die gleichen Werte rotiert und verschoben; nur die Reihenfolge der Transformationsfunktionen ist unterschiedlich.
HTML
<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>
CSS
.one {
transform: translateX(200px) rotate(135deg);
}
.two {
transform: rotate(135deg) translateX(200px);
}
Ergebnis
Wenn ein Element vor dem Verschieben rotiert wird, befindet sich die Übersetzungsrichtung auf der gedrehten Achse. Die Achse wird durch die gepunkteten 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 allen erläuterten Transformationsfunktionen.- Einzelne CSS-Eigenschaften:
translate
,rotate
undscale
(es gibt keineskew
-Eigenschaft). - SVG
transform
-Attribut - Online-Tool zur Visualisierung von CSS-Transformationsfunktionen: CSS Transform Playground