Animating an image to make it rotate in a circle - html

Question

I am working on image transforms, rotates, and keyframes, but I am having a bit of an issue trying to get an image to spin in a circle. I have it set to rotate 360deg and two keyframes 0 and 100. I am wanting the image to spin from the center point of the image, so it looks as if the loading circle is loading something.
Right now it seems the image spins from the top-left corner.
Does anyone see what I am doing wrong?
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 10s;
animation-iteration-count: infinite;
width: 40px;
height: 40px;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div id="spinning-circle">
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>

Answer 1

Add
#spinning-circle img {
width: 100%;
height: auto;
}
to your styles
It's spinning on an offset because the image is bigger than the container. If you wish to move the origin of transformations, use the transform-origin property

Answer 2

You need to give it a transform-origin property
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 5s;
animation-iteration-count: infinite;
width: 40px;
height: 40px;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 125% 125%;
transform-origin: 125% 125%;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: 125% 125%;
transform-origin: 125% 125%;
}
}
<div id="spinning-circle">
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>