The following CSS will make a image rotate from the center point. This will work with Chrome and Firefox and IE.
#spin{
position:fixed;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinnerRotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinnerRotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
@-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
With the following HTML
<div id="spin"> <img src="yourImage.png"></img> </div>
