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="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fdeveloper.mozilla.org%2Fshared-assets%2Fimages%2Fexamples%2Ffirefox-logo.svg&mode=full"
    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 als Schlüsselwortwert none oder als 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 und so weiter –, sodass das visuelle Ergebnis der geschriebenen Reihenfolge der Funktionen entspricht. Alternativ kann dieselbe Transformation bei Beibehaltung des übergeordneten Koordinatenraums als Anwendung der Funktionen in umgekehrter Reihenfolge (von rechts nach links) beschrieben werden.

none

Gibt an, dass keine Transformation angewendet werden soll.

Barrierefreiheit

Skalierungs-/Zoom-Animationen sind für die Barrierefreiheit problematisch, da sie häufig bestimmte Arten von Migräne auslösen. Wenn Sie solche Animationen auf Ihrer Website einbinden müssen, sollten Sie eine Steuerungsmöglichkeit bereitstellen, mit der Benutzer Animationen deaktivieren können, vorzugsweise für die gesamte Website.

Erwägen Sie außerdem die Verwendung des Media Features prefers-reduced-motion – verwenden Sie es, um eine Media Query zu schreiben, die Animationen deaktiviert, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animationen festgelegt hat.

Weitere Informationen:

• MDN: Erläuterungen zu WCAG, Richtlinie 2.3
• Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1

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

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

Vergleich der Reihenfolge von Transformationsfunktionen

Die Reihenfolge der Transformationsfunktionen ist wichtig.

In diesem Beispiel werden zwei Boxen mit denselben Werten gedreht und verschoben, aber die Funktionen stehen in der entgegengesetzten 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 wird zunächst entlang der X-Achse um 200px verschoben und dreht sich dann innerhalb dieses verschobenen Raums um 135deg, sodass das Element gedreht rechts von seiner ursprünglichen Position landet.
• Box 2 (zuerst rotate(), dann translateX()): Der Koordinatenraum dreht sich zunächst um 135deg, sodass sich das Element anschließend entlang der gedrehten Achse um 200px bewegt, in die durch die gepunkteten Linien dargestellte Richtung. Weitere Beispiele finden Sie unter CSS-Transformationen verwenden und bei <transform-function>.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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