transform CSS property

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

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

Werte

Diese Eigenschaft wird entweder durch den Schlüsselwortwert none oder durch eine durch Leerzeichen getrennte Liste von <transform-function>-Werten angegeben:

<transform-function>

Eine oder mehrere anzuwendende CSS-Transformationsfunktionen. Die Transformationsfunktionen werden von links nach rechts kombiniert: Jede Funktion legt einen neuen Koordinatenraum für die nächste Funktion fest. Dadurch entspricht das visuelle Ergebnis der Reihenfolge, in der die Funktionen geschrieben sind. Alternativ lässt sich dieselbe Transformation bei unverändertem Koordinatenraum des Elternelements als Anwendung der Funktionen in umgekehrter Reihenfolge (von rechts nach links) beschreiben.

none

Gibt an, dass keine Transformation angewendet werden soll.

Barrierefreiheit

Animationen mit Skalierung oder Zoom können die Barrierefreiheit beeinträchtigen, da sie bestimmte Arten von Migräne auslösen können. Wenn Sie solche Animationen auf Ihrer Website verwenden, sollten Sie eine Möglichkeit anbieten, Animationen zu deaktivieren – vorzugsweise für die gesamte Website.

Erwägen Sie außerdem, das Media-Feature prefers-reduced-motion zu verwenden. Damit können Sie eine Medienabfrage erstellen, die Animationen deaktiviert, wenn die Person in ihren Systemeinstellungen reduzierte Animationen festgelegt hat.

Weitere Informationen:

• MDN: WCAG verstehen – Erläuterungen zu Leitlinie 2.3
• Erfolgskriterium 2.3.3 verstehen | W3C: WCAG 2.1 verstehen

Formale Definition

Formale Syntax

transform = 
  none              |
  <transform-list>  

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

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

<scale3d()> = 
  scale3d( [ <number> | <percentage> ]#{3} )  

<scale()> = 
  scale( <number> , <number>? )  

<scaleX()> = 
  scaleX( <number> )  

<scaleY()> = 
  scaleY( <number> )  

<scaleZ()> = 
  scaleZ( [ <number> | <percentage> ] )  

<translate3d()> = 
  translate3d( <length-percentage> , <length-percentage> , <length> )  

<translate()> = 
  translate( <length-percentage> , <length-percentage>? )  

<translateX()> = 
  translateX( <length-percentage> )  

<translateY()> = 
  translateY( <length-percentage> )  

<translateZ()> = 
  translateZ( <length> )  

<rotate3d()> = 
  rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )  

<rotate()> = 
  rotate( [ <angle> | <zero> ] )  

<rotateX()> = 
  rotateX( [ <angle> | <zero> ] )  

<rotateY()> = 
  rotateY( [ <angle> | <zero> ] )  

<rotateZ()> = 
  rotateZ( [ <angle> | <zero> ] )  

<skew()> = 
  skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )  

<skewX()> = 
  skewX( [ <angle> | <zero> ] )  

<skewY()> = 
  skewY( [ <angle> | <zero> ] )  

<matrix3d()> = 
  matrix3d( <number>#{16} )  

<matrix()> = 
  matrix( <number>#{6} )  

<perspective()> = 
  perspective( [ <length [0,∞]> | none ] )  

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

Beispiele

Ein Element verschieben und drehen

HTML

<div>Transformed element</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

Ergebnis

Reihenfolge der Transformationsfunktionen vergleichen

Die Reihenfolge der Transformationsfunktionen ist wichtig.

In diesem Beispiel werden zwei Boxen um dieselben Werte gedreht und verschoben, die Funktionen stehen jedoch in umgekehrter Reihenfolge. Die gepunkteten Linien markieren die X-Achse vor und nach der Drehung.

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;
}

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

Ergebnis

• Box 1 (zuerst translateX(), dann rotate()): Der Koordinatenraum verschiebt sich zunächst um 200px entlang der X-Achse und dreht sich anschließend in diesem verschobenen Raum um 135deg. Das Element befindet sich dadurch gedreht rechts von seiner ursprünglichen Position.
• Box 2 (zuerst rotate(), dann translateX()): Der Koordinatenraum dreht sich zunächst um 135deg. Anschließend bewegt sich das Element um 200px entlang der gedrehten Achse in die durch die gepunkteten Linien angezeigte Richtung. Weitere Beispiele finden Sie unter CSS-Transformationen verwenden und <transform-function>.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Transformationen verwenden
• Der Datentyp <transform-function> mit Erläuterungen zu allen Transformationsfunktionen.
• Einzelne CSS-Eigenschaften: translate, rotate und scale (eine Eigenschaft skew gibt es nicht).
• Das SVG-Attribut transform
• Online-Tool zur Visualisierung von CSS-Transformationsfunktionen: CSS Transform Playground