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 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 eine 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 kombiniert – jede Funktion etabliert einen neuen Koordinatenraum für die nächste Funktion und so weiter – sodass das visuelle Ergebnis der geschriebenen Reihenfolge der Funktionen entspricht. Alternativ kann unter Beibehaltung des übergeordneten Koordinatenraums dieselbe Transformation beschrieben werden, indem die Funktionen in umgekehrter Reihenfolge (von rechts nach links) angewendet werden.

none

Gibt an, dass keine Transformation angewendet werden soll.

Barrierefreiheit

Skalierungs- bzw. 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 eine Kontrolle bereitstellen, um Benutzern zu ermöglichen, Animationen deaktivieren zu können, idealerweise für die gesamte Website.

Erwägen Sie auch die Verwendung des prefers-reduced-motion-Media-Features – verwenden Sie es, um eine Media Query zu schreiben, die Animationen deaktiviert, falls der Benutzer reduzierte Animation in seinen Systemeinstellungen angegeben hat.

Erfahren Sie mehr darüber:

• MDN Understanding WCAG, Erläuterungen zu 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

Übersetzen 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 umgekehrter Reihenfolge. Die gestrichelten 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 zuerst 200px entlang der X-Achse und dreht sich dann 135deg innerhalb dieses verschobenen Raums, sodass das Element rechts von seiner ursprünglichen Position endet, gedreht.
• Box 2 (zuerst rotate(), dann translateX()): Der Koordinatenraum dreht sich zuerst 135deg, sodass sich das Element dann 200px entlang der gedrehten Achse in der Richtung der gestrichelten Linien bewegt. Weitere Beispiele finden Sie unter CSS-Transformationen verwenden und <transform-function>.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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