Cette animation fait très simplement intervenir du HTML et du CSS.
HTML
<div id="monlogo"><img alt="logo qui tourne" src="http://data.over-blog-kiwi.com/1/30/51/51/20160107/ob_038c27_image2.jpg"></div>
CSS dans le code html mais compris entre les balises <style></style>
<style type="text/css">#monlogo img{
-webkit-transition:-webkit-transform .9s; // Chrome Safari
-moz-transition:-moz-transform .9s; // Mozilla
-o-transition:-o-transform .9s; // Opéra
-ms-transition:-ms-transform .9s; // IE
transition:transform .9s;
}
#monlogo img:hover{
-webkit-transform:rotate(7200deg);
-moz-transform:rotate(7200deg);
-o-transform:rotate(7200deg);
-ms-transform:rotate(7200deg);
transform:rotate(7200deg);
}
</style>
Sa vitesse de rotation est adaptable à plusieurs navigateurs et le nombre de rotations doit être un multiple de 360 degrés pour que l'image se repositionne.
Dans l'exemple, je la fais tourner 20 fois soit 360 X 20.
CODE
<div id="monlogo"><img alt="logo qui tourne" src="http://data.over-blog-kiwi.com/1/30/51/51/20160107/ob_038c27_image2.jpg">
<style type="text/css">#monlogo img{
-webkit-transition:-webkit-transform .9s; // Chrome Safari
-moz-transition:-moz-transform .9s; // Mozilla
-o-transition:-o-transform .9s; // Opéra
-ms-transition:-ms-transform .9s; // IE
transition:transform .9s;
}
#monlogo img:hover{
-webkit-transform:rotate(7200deg);
-moz-transform:rotate(7200deg);
-o-transform:rotate(7200deg);
-ms-transform:rotate(7200deg);
transform:rotate(7200deg);
}
</style>
</div>
RESULTAT
Haut de page