Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Zurück zur Übersicht
CSS: Bild/Objekt mit CSS drehen (rotate) beim Hovern
#Tutorials#CSS
Mit CSS3 kann man mitlerweile sehr schöne Animationen bauen und das völlig ohne Javascript. Zwar gibt es im IE Probleme, aber wer den Browser benutzt ist auch selber Schuld. Um etwas um 360° zu drehen, wenn man mit der Maus drübergeht (hover) einfach folgende Zeilen in das CSS kopieren und eurem Bild/Text was auch immer die Klasse "rotate" geben. Schon ist man fertig.
Demo kann man hier sehen:
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-ms-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotate:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar