transform

Mit der CSS-Eigenschaft transform können Sie ein Element drehen, skalieren, schräg stellen oder übersetzen. Sie modifiziert den Koordinatenraum des CSS visuellen Formatierungsmodells.

Wenn die Eigenschaft einen anderen Wert als none hat, wird ein Stapelkontext erstellt. In diesem Fall fungiert das Element als ein enthaltender Block für alle position: fixed; oder position: absolute; Elemente, die es enthält.

Nur transformierbare Elemente können transformiert werden. Das heißt, alle Elemente, deren Layout durch das CSS-Box-Modell geregelt wird, mit Ausnahme von: nicht ersetzten Inline-Boxen, Tabellen-Spalten-Boxen und Tabellen-Spalten-Gruppen-Boxen (en-US).

Syntax

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
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.0, 3.0, 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) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

Die Eigenschaft transform kann entweder als Schlüsselwortwert none oder mehrere<transform-function> -Werte angegeben werden.

Hinweis: Wenn perspective() (en-US) einer von mehreren Funktionswerten ist, muss er zuerst aufgeführt 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
Specifies that no transform should be applied.

Bedenken hinsichtlich der Zugänglichkeit

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 ein Steuerelement bereitstellen, mit dem Benutzer Animationen abschalten können, vorzugsweise site-wide.

Ziehen Sie außerdem in Erwägung, die Medienfunktion prefers-reduced-motion zu nutzen - verwenden Sie sie, um eine Media Queries zu schreiben, die Animationen ausschaltet, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animationen angegeben hat.

Erfahren Sie mehr:

Formale Definition

Initialwertnone
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwertebezieht sich auf die Größe der äußeren Box
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
AnimationstypTransformation
Erstellt StapelkontextJa

Formale Syntax

none | <transform-list>

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

wobei
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>

wobei
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )

wobei
<length-percentage> = <length> | <percentage>

Beispiel

Verschieben 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

Mehr Beispiele

Weitere Beispiele finden Sie unter Verwendung von CSS-Transformationen und <transform-function>.

Spezifikationen

Spezifikation Status Kommentar
CSS Transforms Level 2
Die Definition von 'transform' in dieser Spezifikation.
Bearbeiterentwurf Zusätzliche 3D Transformationsfunctionen.
CSS Transforms Level 1
Die Definition von 'transform' in dieser Spezifikation.
Arbeitsentwurf Ursprünglich Definition.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch