ảnh Xoay quanh css3 trung tâm

Question

Im cố gắng để quay một thế giới xung quanh trung tâm của nó - nhưng không thể dường như xoay nó một cách chính xác (khoảng trục trung tâm riêng của mình)

Thật khó để giải thích vì vậy tôi đã fiddle bạn có thể cũng .... fiddle với.

http://jsfiddle.net/FQwYJ/

và css của tôi

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

Thanks for the help (trợ giúp làm việc sẽ được ghi trong thí nghiệm cuối cùng)

Answer 1

Bạn không giới hạn kích thước của div.

Trong thực tế, bạn không cần phải div ở tất cả, bạn chỉ có thể áp dụng các lớp để hình ảnh:

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

bạn cần phải thiết lập kích thước của nguyên tố này và chỉ định transform-origin thuộc tính

-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 fiddle: http://jsfiddle.net/RbXRM/3/

Answer 3

bạn cần phải quay chỉ 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; 
} 

hoặc sửa đổi hiển thị của div.world để nó it shrinks trên hình ảnh (inline-block,inline-table,table) hoặc thậm chí float nó