Girar imagen alrededor del centro css3

Si encuentras algún error con tu código o trabajo, recuerda probar siempre en un entorno de testing antes añadir el código al proyecto final.

Solución:

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

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

No está restringiendo el tamaño del div.

De hecho, no necesita el div en absoluto, solo puede aplicar la clase a la imagen:

.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);
 

---

---

Utiliza Nuestro Buscador