CSS transform-Eigenschaft

Die CSS-Eigenschaft transform ermöglicht es, ein Element visuell neu zu positionieren, zu skalieren, zu drehen oder zu verzerren, ohne das umgebende Layout zu beeinflussen. Sie gehört zu den CSS3-Eigenschaften und akzeptiert entweder das Schlüsselwort none oder eine oder mehrere Transform-Funktionen — zum Beispiel rotate(), scale(), translate() oder skew().

Ein wichtiger Grundsatz: Eine Transformation ändert die Darstellung eines Elements, aber der Platz, den es ursprünglich im Dokumentfluss eingenommen hat, bleibt gleich. Benachbarte Elemente werden nicht neu angeordnet, wenn ein Element transformiert wird — genau deshalb sind Transformationen günstig zu animieren, da der Browser sie auf die GPU auslagern kann.

Diese Seite behandelt die Syntax, den vollständigen Satz an 2D- und 3D-Transform-Funktionen, wie der Ankerpunkt (transform-origin) das Ergebnis beeinflusst, und wie Transformationen mit Übergängen und Animationen für Bewegungseffekte kombiniert werden.

Info

Transformationen gelten für transformierbare Elemente — Block-, Flex-, Grid- und Inline-Block-Boxen sowie SVG-Elemente. Sie gelten nicht für nicht-ersetzte Inline-Elemente wie ein einfaches <span> (zuerst display: inline-block setzen).

Es können mehrere Funktionen in einer Deklaration verkettet werden. Sie werden von rechts nach links angewendet, die rechteste Funktion wird also zuerst ausgeführt:

/* first rotate, then translate the rotated box */
transform: translate(10px, 40px) rotate(50deg);

Anfangswert	none
Gilt für	Transformierbare Elemente.
Vererbbar	Nein.
Animierbar	Ja.
Version	CSS3
DOM-Syntax	Object.style.transform = "rotate(10deg)";

Syntax

CSS transform-Werte

transform: none | transform-functions | initial | inherit;

Beispiel der transform-Eigenschaft:

CSS transform-Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px dashed #666;
        background-color: #8ebf42;
        transform: translate(10px, 40px) rotate(50deg);
        width: 130px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <div>An element</div>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel mit mehreren Transform-Funktionen

CSS transform-Beispiel mit mehreren Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 35px 20px;
      }
      div.box1 {
        width: 130px;
        height: 80px;
        border: 1px solid #000;
        background-color: #1c87c9;
        transform: rotate(30deg);
      }
      div.box2 {
        width: 120px;
        height: 80px;
        border: 1px solid #000;
        background-color: #8ebf42;
        transform: skewY(30deg);
      }
      div.box3 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FFFF00;
        transform: scaleY(1.5);
      }
      div.box4 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #ccc;
        transform: rotate(160deg);
      }
      div.box5 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #990099;
        transform: translateX(50px);
      }
      div.box6 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FF0000;
        transform: skew(170deg, 170deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <h3>transform: scaleY(1.5):</h3>
    <div class="box3"></div>
    <h3>transform: rotate(160deg):</h3>
    <div class="box4"></div>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

Probier es selbst »

Transform-Funktionen

translate()

translate(tx, ty) verschiebt ein Element seitwärts und nach oben/unten, ohne andere Elemente zu beeinflussen. tx ist die horizontale Verschiebung, ty die vertikale; ein positiver ty-Wert verschiebt das Element nach unten. Für eine einzelne Achse werden translateX() oder translateY() verwendet. Da keine Layout-Neuberechnung ausgelöst wird, ist translate() die bevorzugte Methode zum Bewegen eines Elements in Animationen:

transform: translate(50px, 20px); /* right 50px, down 20px */
transform: translateX(-30px);     /* left 30px */

scale()

scale(x, y) verändert die Größe eines Elements relativ zu seiner aktuellen Größe. 1 lässt es unverändert, 2 verdoppelt es, 0.5 halbiert es, und ein negativer Wert spiegelt es. Mit einem Argument werden beide Achsen gleichmäßig skaliert:

transform: scale(1.5);   /* 150% in both directions */
transform: scale(2, 0.5);/* twice as wide, half as tall */

rotate()

rotate(angle) dreht ein Element um seinen Ursprung. Ein positiver Winkel dreht im Uhrzeigersinn, ein negativer gegen den Uhrzeigersinn. Der Winkel wird in deg, rad, grad oder turn angegeben:

transform: rotate(45deg);
transform: rotate(-0.25turn); /* same as rotate(-90deg) */

skew()

skew(ax, ay) neigt (schert) ein Element entlang der x- und y-Achse. skewX() und skewY() scheren entlang einer einzelnen Achse. Ein Wert von 0deg lässt die jeweilige Achse unverändert:

transform: skewX(20deg);
transform: skew(20deg, 10deg);

matrix()

matrix(a, b, c, d, e, f) kombiniert alle 2D-Transformationen — Skalierung, Scherung, Rotation und Translation — in einer einzigen Funktion. Diese Schreibweise wird selten von Hand verwendet; Browser berechnen sie intern, und sie ist die Form, die beim Lesen eines berechneten Stils angezeigt wird.

transform-origin

Standardmäßig dreht sich jede Transformation um den Mittelpunkt des Elements. Die Eigenschaft transform-origin ändert diesen Ankerpunkt, was das Ergebnis von rotate() oder scale() erheblich beeinflusst. Zum Beispiel bewirkt transform-origin: top left, dass rotate(45deg) das Element um seine obere linke Ecke statt um seinen Mittelpunkt dreht.

2D- vs. 3D-Transformationen

Die oben genannten Funktionen arbeiten in der 2D-Ebene. Ihre 3D-Entsprechungen — translateZ(), rotateX(), rotateY(), rotate3d() und so weiter — bewegen und drehen Elemente entlang der z-Achse (zum Betrachter hin oder von ihm weg). 3D-Transformationen wirken nur dann dreidimensional, wenn eine perspective auf das Element oder sein übergeordnetes Element angewendet wird; ohne Perspektive lässt ein rotateY() das Element lediglich horizontal gestaucht erscheinen.

Transformationen animieren

Die Eigenschaft transform ist animierbar und daher das Hauptwerkzeug für flüssige UI-Bewegungen. Sie lässt sich mit einem transition für Hover-Effekte kombinieren oder mit einer animation und Keyframes für kontinuierliche Bewegungen:

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.05) translateY(-4px);
}

Werte

Wert	Beschreibung	Ausprobieren
none	Es wird keine Transformation angewendet.	Ausprobieren »
translate()	Verschiebt das Element um einen Vektor [tx, ty]. Tx ist die Verschiebung entlang der x-Achse. Ty ist die Verschiebung entlang der y-Achse.	Ausprobieren »
translateX()	Verschiebt das Element entlang der x-Achse.	Ausprobieren »
translateY()	Verschiebt das Element entlang der y-Achse.	Ausprobieren »
scale(x, y)	Vergrößert oder verkleinert ein Element.	Ausprobieren »
scaleX()	Skaliert ein Element entlang der x-Achse.	Ausprobieren »
scaleY()	Skaliert ein Element entlang der y-Achse.	Ausprobieren »
rotate(angle)	Dreht ein Element im zweidimensionalen Raum. Der Winkel wird im Parameter angegeben.	Ausprobieren »
skew()	Definiert eine 2D-Scherungstransformation entlang der x- und y-Achse.	Ausprobieren »
skewX()	Definiert eine 2D-Scherungstransformation entlang der x-Achse.	Ausprobieren »
skewY()	Definiert eine 2D-Scherungstransformation entlang der y-Achse.	Ausprobieren »
matrix()	Definiert eine 2D-Transformation mithilfe einer Matrix aus sechs Werten.	Ausprobieren »
translateZ()	Verschiebt ein Element um den angegebenen Betrag entlang der z-Achse.
translate3d()	Definiert eine dreidimensionale Translation.
scaleZ()	Skaliert ein Element in der dritten Dimension entlang der z-Achse.
scale3d()	Definiert eine dreidimensionale Skalierungstransformation.
rotateX()	Dreht ein Element um die x-Achse im dreidimensionalen Raum.	Ausprobieren »
rotateY()	Dreht ein Element um die y-Achse im dreidimensionalen Raum.	Ausprobieren »
rotateZ()	Dreht ein Element um die z-Achse im dreidimensionalen Raum.	Ausprobieren »
rotate3d()	Definiert eine dreidimensionale Rotationstransformation.
matrix3d()	Definiert eine 3D-Transformation mithilfe einer 4x4-Matrix aus 16 Werten.
perspective()	Definiert eine Perspektivansicht für das dreidimensionale Element.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Welche Aussage über die transform-Eigenschaft ist falsch?

Sie kann auf transformierbare Elemente angewendet werden.Die transform-Eigenschaft ermöglicht das Drehen, Skalieren, Scheren oder Verschieben von Elementen.Sie gibt nur die zweidimensionale Transformation des Elements an.