Drehende Avatare

T1N0

CSS

.framed > canvas, .framed > img:hover, .framed > .icon:hover {


opacity: 0.4; 
    -moz-transition: all 1s ease-out;  /* FF4+ */
    -o-transition: all 1s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1s ease-out;  /* IE10? */
    transition: all 1s ease-out;  
    }


.framed > canvas, .framed > img:hover, .framed > .icon:hover  {
-webkit-transform: rotate(365deg);
-moz-transform: rotate(365deg);
-o-transform: rotate(365deg);
-ms-transform: rotate(365deg);
transform: rotate(365deg);
}

Alles anzeigen

Tobias777

Eine nette Spielerei

Aber reicht nicht im Prinzip auch nur

CSS

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

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

T1N0

Danke. Ob das reicht weiß ich nicht. Habe das Beispiel für drehende Avatare nur übernommen

Thorsten Geiger

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

Tobias777

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?

CSS

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

Thorsten Geiger

Zitat von Tobias777

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

Pahahaa

Drehende Avatare

Dragosius 12. Februar 2024 um 21:29

Informationen

Über uns