CSS/Eigenschaften/transform

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft transform ändert die Form eines HTML-Elementes. So lässt es sich etwa spiegeln, drehen oder scheren, aber auch verschieben.

erlaubte Werte
  • none:
  • translate(): Verschiebung
  • scale(): Streckung
  • rotate(): Drehung
  • skew(): Scherung
  • matrix(): Transformieren durch Angabe einer Transformationsmatrix
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: none
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar ja, als Transformation
Beispiel
:hover .box {  
   transform: 
     rotate(7deg)
     scale(2, 2)
     skewX(20deg)
     translate(150px, 150px);
  }
Beispiel für mehrere Transformationen

Weblinks

Siehe auch