Rotate image around center css3

Question

Im trying to spin a world around its center - but cant seem to rotate it the correct way (around its own center axis)

Its hard to explain so i made a fiddle you can well....fiddle with.

http://jsfiddle.net/FQwYJ/

and my css

.world
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
}

@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
} 

Thanks for the help (working help will be credited in the final experiment)

Answer 1

you need to set the size of the element and specify the transform-origin property

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: 256px;
height: 256px;

Example fiddle : http://jsfiddle.net/RbXRM/3/

Answer 2

you need to spin only the img

.world img
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
}

or modify display of div.world so it it shrinks on image (inline-block,inline-table,table) or even float it

Answer 3

You are not restricting the size of the div.

In fact you don't need the div at all, you can just apply the class to the image:

JSfiddle Demo

<img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/>