Obrót obrazu wokół środkowej CSS3

Im próbuje rozkręcić świat wokół jego środka - ale cant wydają się obrócić go w prawidłowy sposób (wokół własnej osi środkowej)Obrót obrazu wokół środkowej CSS3

Trudno wytłumaczyć tak zrobiłem skrzypce ty dobrze potrafisz ....skrzypce z.

http://jsfiddle.net/FQwYJ/

i mój 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);} 
}

Dzięki za pomoc (help pracy zostanie przelana w ostatnim eksperymencie)

Źródło

2014-04-07 anthonytherockjohnson

Nie musisz ustawiać punktu początkowego na środku obrazu, używając: 'transform-origin' – Cyclonecode

Dzięki za odpowiedzi, ale po małym manipulowaniu - wszystko, co musiałem zrobić, to określić klasę obrazu jako .world i wszystko przebiegło bez zarzutu - aby wyjaśnić - obracałem div zamiast obrazu, a pochodzenie div było, jak sądzę, prawym dolnym rogiem. – anthonytherockjohnson

Nie, domyślne pochodzenie elementów div znajduje się w lewym górnym rogu. – Cyclonecode

Nie ograniczasz rozmiaru div.

W rzeczywistości nie trzeba div w ogóle, można po prostu zastosować klasę do obrazka:

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

Źródło

2014-04-07 09:24:20

To jest - zrozumiałem, jak odpowiedziałeś - dziękuję ty i tak. Paulie_D zapłaci – anthonytherockjohnson

trzeba ustawić rozmiar elementu i określić transform-origin Właściwość

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

Źródło

2014-04-07 09:22:40 fcalderan

w rzeczywistości 'transform-origin' jest domyślnie wyśrodkowany http://jsfiddle.net/RbXRM/2/ –

@KingKing Nice, Myślałem, że domyślna wartość to' 0, 0, 0'. Czy jest to wartość domyślna dla każdej przeglądarki? – fcalderan

Nie jestem pewien, ale powinno tak być, ponieważ to jest napisane w specyfikacji CSS3 http://www.w3schools.com/cssref/css3_pr_transform-origin.asp :) –

trzeba kręcić tylko 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; 
}

lub zmodyfikuj wyświetlanie div.world, więc it shrinks na obrazie (inline-block,inline-table,table) lub nawet float it

Źródło

2014-04-07 09:30:10

Obrót obrazu wokół środkowej CSS3

Odpowiedz

Powiązane problemy