Bild dreht um das Zentrum css3

Im Versuch, eine Welt, um seinen Mittelpunkt zu drehen - aber kann nicht scheinen, um es den richtigen Weg (um die eigene Mittelachse) zu drehenBild dreht um das Zentrum css3

Es ist schwer zu erklären, so dass ich eine Geige gemacht Sie gut kannst .... mit geigen spielen.

http://jsfiddle.net/FQwYJ/

und mein 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);} 
}

Danke für die Hilfe (Arbeitshilfe wird im letzten Experiment gutgeschrieben)

Quelle

2014-04-07 anthonytherockjohnson

Müssen Sie den Ursprung nicht auf die Mitte Ihres Bildes setzen mit: 'transform-origin' – Cyclonecode

Danke für die Antworten, aber nach ein wenig Tüfteln - alles was ich tun musste war die Bildklasse als .world und alles lief gut - um klar zu stellen - ich drehte die div anstelle des bildes und der div-herkunft vermute ich ist unten rechts ecke. – anthonytherockjohnson

Nein, der Standardursprung der divs befindet sich in der oberen linken Ecke. – Cyclonecode

Sie beschränken nicht die Größe der div.

In der Tat Sie nicht über die div brauchen überhaupt, können Sie einfach die Klasse auf das Bild anwenden:

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

Quelle

2014-04-07 09:24:20

Das ist es - ich fand es heraus, wie Sie antworteten - danke Du sowieso. Paulie_D wird es gutschreiben – anthonytherockjohnson

Sie die Größe des Elements festlegen müssen, und geben Sie die transform-origin Eigenschaft

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

E Beispiel Geige: http://jsfiddle.net/RbXRM/3/

Quelle

2014-04-07 09:22:40 fcalderan

in der Tat ist die 'Transformation-Herkunft 'standardmäßig zentriert http://jsfiddle.net/RbXRM/2/ –

@KingKing Nizza, dachte ich, der Standardwert war' 0, 0, 0'. Ist es der Standardwert für jeden Browser? – fcalderan

Ich bin mir nicht sicher, aber es sollte so sein, denn das ist was in CSS3 Spezifikation geschrieben http://www.w3schools.com/cssref/css3_pr_transform-origin.asp :) –

Sie nur das img Spin müssen

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

oder ändern Sie die Anzeige von div.world so es it shrinks auf Bild (inline-block,inline-table,table) oder sogar float es

Quelle

2014-04-07 09:30:10

Antwort

Verwandte Themen