Rotation

In diesem Tutorial zeige ich euch, wie man ein Bild via CSS drehen kann. Das ist zum Beispiel ein schöner Hover-Effekt für Graphiken wie Icons und ähnliches.

Beispiel

mit Hover ohne Hover

Code

Im folgenden seht ihr welchen Code ihr für die Rotation in euren CSS Style einbauen müsst. Die Zahlen könnt ihr dabei beliebig verändern - je höher, desto stärker die Rotation. Da sich bei der Rotation jedoch auch die Bildqualität ändert, würde ich es jedoch nicht übertreiben.

In meinem Beispiel habe ich die Bilder nach rechts gedreht und dafür im Code ein Minus verwendet. Möchtet ihr, dass sich euer Bild nach links dreht, so müsst ihr das Minuszeichen einfach entfernen. Die verschiedenen Angaben dienen übrigens dazu, dass der Code auch in jedem Browser umgesetzt wird.

Damit der Code auch auf euer Bild angewendet wird, müsst ihr ihm eine Klasse im HTML Code zuweisen.