CSS/Eigenschaften/äußere Gestaltung/Transformationen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • CSS 3.0
  • IE 10
  • Firefox
  • Chrome
  • Safari
  • Opera

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.

[Bearbeiten] Anwendungsbeispiel

Sie können mehrere Transformationen gleichzeitig anwenden:

Beispiel ansehen …
: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.


Achtung!

Die Eigenschaft transform ist derzeit (Stand: August 2016) noch nicht in alle aktuelle Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-transform

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML