Rotate image around center css3

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"/>