Eine nette Spielerei

Aber reicht nicht im Prinzip auch nur

transform: rotate(365deg);
			transition: all 2s ease-out;

Zumindest die aktuellen Versionen von Chrome, Firefox und Opera zeigen auch nur damit den Effekt.

Ich hatte das mal kurz getestet. Grundsätzlich reicht es wohl. Wobei die Animation nicht so schön ist. Auch stoppt die Drehung nicht nach genau 360 Grad.
Lässt sich aber bestimmt auch anpassen.

Bei @T1N0s Variante ist mir dafür immer wieder mein Safari abgestürzt

Zitat von T1N0

Habe das Beispiel für drehende Avatare nur übernommen

Achso Vielleicht benötigen manche Browser Versionen diese extra Angaben, aber bei so einer unwichtigen Spielerei wäre mir persönlich das egal, wenns nicht auf jeder noch so unwahrscheinlichen Browserversion funktioniert

Zitat von Thorsten Geiger

Auch stoppt die Drehung nicht nach genau 360 Grad.

Woran könnte das wohl liegen... "365deg"
Nimm 360deg, dann haste auch eine 360 Grad Drehung

Ich habe das ganze auch mal für die Userpanel Icons ausprobiert (Benachrichtungsglocke, etc). Leider sorgt das bei Webkit Browsern (z.B. Chrome) für einen Unschärfeeffekt während der Animation und das nicht nur beim drehenden Icon, sondern bei allen im Userpanel. Das ist schon echt nervig. Man findet auch einiges wenn man z.B. "webkit css rotate blurry" googlet, darunter auch einige Lösungsvorschläge. Leider hat von denen keiner bei mir geklappt Hat hier vielleicht Jemand eine Idee?

.userPanelItems { 
		img:hover, .icon:hover  { 
			transform: rotate(360deg);
			transition: all 2s ease-out;	
		} 
	}

Zitat von Tobias777

Woran könnte das wohl liegen... "365deg"

Pahahaa