`transform` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Die transform-Eigenschaft von CSS ermöglicht es Ihnen, ein Element zu drehen, skalieren, schrägstellen oder zu verschieben. Sie verändert 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 umschließender Block für alle position: fixed; oder position: absolute; Elemente, die es enthält.

Sie können auch die individuellen Transformations-Eigenschaften verwenden: translate, rotate, und scale. Diese Eigenschaften werden in der Reihenfolge angewendet: translate, rotate, scale und schließlich transform.

Warnung: Nur transformierbare Elemente können transformed werden. Das heißt, alle Elemente, deren Layout durch das CSS-Box-Modell bestimmt wird, mit Ausnahme von: nicht ersetzten Inline-Boxen, Tabellenspalten-Boxen, und Tabellenspalten-Gruppen-Boxen.

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

css

/* 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 ein 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 multipliziert, was bedeutet, dass zusammengesetzte Transformationen effektiv in der 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 ein häufiger Auslöser für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen auf Ihrer Website einfügen müssen, sollten Sie eine Steuerung bereitstellen, mit der Benutzer Animationen ausschalten können, vorzugsweise seitenweit.

Ziehen Sie auch in Betracht, die prefers-reduced-motion Media-Feature zu verwenden — verwenden Sie es, um eine Media-Query zu schreiben, die Animationen ausschaltet, wenn der Benutzer reduzierte Animationen in seinen Systemeinstellungen angegeben hat.

Erfahren Sie mehr:

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>+  

<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

Translating and rotating an element

HTML

html

<div>Transformed element</div>

CSS

css

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

Result

Reihenfolge der Transformationen

Die Reihenfolge der Transformationsfunktionen ist wichtig. In diesem Beispiel werden zwei Boxen mit den gleichen Werten gedreht und verschoben; nur die Reihenfolge der Transformationsfunktionen ist unterschiedlich.

HTML

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

css

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

Result

Wenn ein Element gedreht wird, bevor es verschoben wird, liegt die Verschieberichtung auf der gedrehten Achse. Die Achse wird mit den gestrichelten Linien angegeben.

Weitere Beispiele

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

Spezifikationen

Spezifikation
CSS Transforms Module Level 2 # transform-functions
CSS Transforms Module Level 1 # transform-property
Scalable Vector Graphics (SVG) 2 # TransformProperty

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

transform CSS property

HTML

CSS

Result

HTML

CSS

Result

Help improve MDN

`transform` CSS property