Jedem Link innerhalb einer Überschrift wird ein leeres Pseudeo-Element vorangestellt:

CSS

h1 a:before {
content: "";
display:inline-block;width:1rem;height:1rem;background: url(../images/icons/gologo13bo.png);background-size:cover;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;}

Damit die Darstellung auch auf Retina Displays optimal ist, wird das Background-Image in doppelter Größe als angegeben angelegt und per background-size:cover skaliert.

 Die Animation:

h1 a:hover:before 
{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg);}

Pseudo x 2

mit der doppelten Pseudo Syntax wird bei :hover des Links die Animation des :before Elements ausgelöst. Ohne weitere Angaben wird das Element um seinen Mittelpunkt rotiert - was hier gewünscht ist.
Mit dem CSS3 Attribut transform-origin kann aber auch ein alternativer Pivotpunkt festgelegt werden.

Beispiel transform-origin:

Kommentar schreiben


Sicherheitscode
Aktualisieren

Quick Menu

FacebookTwitterDiggGoogle BookmarksTechnoratiLinkedin