CSS/Eigenschaften/äußere Gestaltung/Transformationen

Aus selfHTML
Zur Navigation springenZur Suche springen

Dieser Artikel beschreibt die CSS-Eigenschaft transform. Das SVG-Element transform ist unter SVG/Transformationen aufgeführt.


Durch Transformationen können Sie beispielsweise die Form eines HTML-Elementes ändern. So lässt es sich etwa spiegeln, drehen oder scheren, aber auch verschieben.

    {{#fornumargs:nr|name|{{#vardefine:class|}}{{#vardefine:classext|}}{{#vardefine:ext|-Extended}}
  • [[Datei:Iconset{{#var:ext}}.png|alt={{#explode:{{#var:classext|{{#var:class|leer+Leer}}}}|+|-1}}|{{#explode:{{#var:classext|{{#var:class|leer+Leer}}}}|+|-1}}]]
  • {{#vardefine:class}}{{#vardefine:classext}}}}

Details: caniuse.com

Die CSS-Eigenschaft transform verändert den Koordinatenraum eines im Browser gerenderten Elements. Dabei können eine oder mehrere transform-Funktionen angewandt werden:

  • none: keine Transformation (Standardwert)
  • translate(): Verschiebung
  • scale(): Streckung
  • rotate(): Drehung
  • skew(): Scherung
  • perspective(): Transformieren durch Angabe einer Transformationsmatrix
  • matrix(): Perspektiven-Matrix einer Transformation
  • initial: Werte werden auf Standardwerte zurückgesetzt
  • inherit: Werte werden vom Elternelement übernommen


Daneben existieren weitere Eigenschaften:

Beachten Sie: Bei transformierten Elementen wird ein Stapelkontext erstellt. In diesem Fall verhält sich das Objekt wie ein position: fixed Block für seine Kindelemente.
Empfehlung: Verwenden Sie 3D-Transformationen, da sie in vielen Browsern hardwarebeschleunigt sind, d.h. dass rechenintensive Operationen an die GPU ausgelagert werden. So können Animationen glatt und ruckelfrei ausgeführt werden.

Anwendungsbeispiel

Sie können mehrere Transformationen gleichzeitig anwenden:

Beispiel {{#BeispielUrl:Beispiel:CSS3_transform.html}}
:hover .box {  
   transform: 
     rotate(7deg)
     scale(2, 2)
     skewX(20deg)
     translate(150px, 150px);
}
Empfehlung: Sie müssen die Transformationen nicht in einer bestimmten Reihenfolge notieren. Falls es zu Darstellungsproblemen kommt, variieren Sie die Reihenfolge.

Weblinks