rotar - girar imagen css3

Girar imagen alrededor del centro css3

Question

Intento girar un mundo alrededor de su centro, pero no puedo rotarlo de la manera correcta (alrededor de su propio eje central)

Es difícil de explicar, así que hice un violín que bien puedes ... tocar con él.

http://jsfiddle.net/FQwYJ/

y mi 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);}
} 

Gracias por la ayuda (la ayuda de trabajo se acreditará en el experimento final)

Answer 1

necesita establecer el tamaño del elemento y especificar la propiedad del transform-origin la transform-origin

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

Ejemplo de violín: http://jsfiddle.net/RbXRM/3/

Answer 2

necesitas girar solo el 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;
}

o modifique la visualización de div.world para que it shrinks en la imagen (en inline-block,inline-table,table ) o incluso float

Answer 3

No estás restringiendo el tamaño del div.

De hecho, no necesitas el div en absoluto, solo puedes aplicar la clase a la imagen:

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