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>