Image Rotation stammt nicht aus dem Zentrum

Question

Ich habe ein Symbol schließen Ich möchte auf seinem Hover drehen. Rotation geschieht aber nicht vom Mittelpunkt aus. Versucht transform-origin : 50% 50% und auch mit center Eigentum, aber immer noch nicht passiert. Erwähnte meinen Code und auch die Verbindung zur Geige.

<div> 

</div> 



div{ 
    background:url('https://s32.postimg.org/4ze7aqwed/close.png') no-repeat; 
    height:16px; 
    width:16px; 
    transform:rotate(0); 
    transition:transform .3s ease 
} 
div:hover{ 
    transform:rotate(90deg) 
} 

Hier ist das fiddle

Answer 1

Ihr Problem, dass das Bild zur Verfügung stellen zu sein scheint für den Hintergrund nicht die gleiche Größe wie die <div> ist. Die Drehung erfolgt standardmäßig mit 50% 50%, aber da Ihr Hintergrundbild die obere linke Ecke abdeckt, wird es bei Drehung um 90º in der oberen rechten Ecke angezeigt.

Ich aktualisierte Ihre jsfiddle, um die div die Größe des Bildes entsprechen, die 10px ist. Jetzt dreht es sich richtig um das geteilte Zentrum zwischen dem Hintergrundbild und dem Div.

Bearbeiten. Wie auch andere gezeigt haben, können Sie das Hintergrundbild mit background-position: center center; zentrieren, was die gleiche Sache mit einem gemeinsamen Zentrum für Ihr div- und Hintergrundbild erreicht.

Answer 2

Ihr Bild ist nicht zentriert. tun Sie einfach URL ('https://s32.postimg.org/4ze7aqwed/close.png') No-Repeat Center-Center;

Answer 3

Set background-position zu center und transform-origin: 50% 50%.

Updated JSFiddle

Answer 4

Verwenden transform-origin: im CSS den Ursprungspunkt zu setzen ....

div{ 
    background:url('https://s32.postimg.org/4ze7aqwed/close.png') no-repeat center center; 
    height:16px; 
    width:16px; 
    transform-origin: 50% 50%; 
    transform:rotate(0); 
    transition:transform .3s ease 
} 
div:hover{ 
    transform-origin: 50% 50%; 
    transform:rotate(90deg) 
} 

Und das Hintergrundbild zentriert.

Fiddle update

Answer 5

try this

div{ 
    background:url('https://s32.postimg.org/4ze7aqwed/close.png') no-repeat center center; 
    height:10px; 
    width:10px; 
    transform:rotate(0); 
    transition:transform .3s ease 


} 
div:hover{ 
    transform:rotate(90deg); 

} 

Answer 6

fügen Sie einfach background-position : center; CSS div das Hintergrundbild Position zu setzen ....