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, ein Element zu rotieren, zu skalieren, zu 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
besitzt, wird ein Stacking-Kontext erstellt. In diesem Fall fungiert das Element als Enthalten der Block für alle position: fixed;
- oder position: absolute;
-Elemente, die es enthält.
Warnung:
Nur transformierbare Elemente können transform
iert werden. Das heißt, alle Elemente, deren Layout durch das CSS-Box-Modell 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 das Schlüsselwort none
oder als eine oder mehrere <transform-function>
-Werte angegeben werden.
Werte
<transform-function>
-
Eine oder mehrere CSS-Transform-Funktionen, die angewendet werden sollen. Die Transform-Funktionen 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 eine häufige Auslöser für bestimmte Arten von Migräne darstellen. Wenn Sie solche Animationen auf Ihrer Website einbauen müssen, sollten Sie eine Möglichkeit bereitstellen, damit Benutzer Animationen deaktivieren können, idealerweise siteweit.
Berücksichtigen Sie außerdem die Nutzung der prefers-reduced-motion
Media-Feature — verwenden Sie diese, um eine Media Query zu schreiben, die Animationen deaktiviert, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animation eingestellt hat.
Weitere Informationen:
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
Verschieben 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
Reihenfolge der Transformationen
Die Reihenfolge der Transform-Funktionen ist wichtig. In diesem Beispiel werden zwei Kästen mit denselben Werten rotiert und verschoben; nur die Transform-Funktionsreihenfolge unterscheidet sich.
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 der Verschiebung rotiert wird, erfolgt die Verschiebung entlang 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform | ||||||||||||
3D support |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
Siehe auch
- Verwendung von CSS-Transformationen
<transform-function>
Datentyp mit allen Transform-Funktionen erklärt.- Einzelne CSS-Eigenschaften:
translate
,rotate
undscale
(es gibt keineskew
-Eigenschaft). - SVG-Attribut
transform
- Online-Tool zur Visualisierung von CSS-Transform-Funktionen: CSS Transform Playground