html - CSS 旋转不居中

Question

所以我得到了这个在悬停时旋转的圆圈，但它没有居中，我不知道为什么(我确实添加了'transform-origin:center center')另外，抱歉，我对 css 知之甚少，但是当有两个连续的选择器时，它的作用/含义是什么？

这是我的代码:

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

该片段并没有显示真正发生的事情，但它只是为了让您可以获得我的代码，这是真正的结果:www.typhotoshop.tumblr.com

感谢您抽出宝贵时间!

Answer 1

旋转实际上是围绕中心进行的，但是您应用旋转的 div 比您的图像大。请参见下面的屏幕截图:

您需要确保旋转的 div 与内部图像的大小完全相同(即从该 div 中完全删除宽度/高度或添加与图像相同的宽度/高度)。

此外，#speechbubble 上的 margin-left 也会在悬停时增加，因此旋转的 div 再次向左移动。使悬停和非悬停时的边距相同，它就不会移动。

希望对您有所帮助。