döndür görüntü

Question

Im onun merkezi etrafında bir dünya dönmeye çalışıyor - ama cant

(kendi merkez ekseni etrafında) burayı doğru şekilde döndürmek görünüyor Onun sana iyi yapabilirsiniz keman yapımı yüzden açıklamak zor .... ile keman. Yardım için

http://jsfiddle.net/FQwYJ/

ve benim 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);} 
} 

Teşekkürler (çalışma yardım nihai deneyde yatırılacaktır) Eğer öğesinin boyutunu ayarlayabilir ve belirtmek gerekir

Answer 1

Siz div boyutunu kısıtlamıyorsunuz. Eğer hiç div gerekmez Aslında

, sadece görüntüye sınıfı uygulayabilirsiniz:

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

Answer 2

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; 

E xample keman: http://jsfiddle.net/RbXRM/3/

Answer 3

sadece IMG'yi dönmeye gerek

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

veya div.world görüntüsünü değiştirebilir veyagörüntüye (inline-block,inline-table,table) veya float