CSS rotation not centered

Question

So I've got this circle that is rotating on hover but it's not centered and I don't know why (I did add the 'transform-origin:center center') And also, sorry I know very very little about css but what does it do/mean when there's two consecutive selectors pls?

Here's my code:

#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;  
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}

#welcome #welcomeavatar{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  transform-origin : center center;
}
 
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}


#welcome #speechbubble{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#welcome #speechbubble{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

<div id="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>

The snippet isn't showing what's really happening but it's just so you can have my code and here's the real result : www.typhotoshop.tumblr.com

Thank you for taking the time!

Answer 1

The rotation is actually around the center, but the div you're applying the rotation to is larger than your image. See screenshot below:

You'll want to make sure the div you're rotating is exactly the same size as the image inside(ie. remove width/height from that div altogether or add width/height that is the same as the image).

Also, the margin-left on the #speechbubble increases on the hover as well, so again, the rotating div moves left. Make that margin the same on hover and no-hover and it won't move.

Hope that helps.