Rotate image around center css3 - css

Question

I'm 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 demo:
.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);
}
}
<div class="world"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" /></div>
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 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:
.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;
display: block;
}
#-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);}
}
<img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/>

Answer 3

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