CSS旋转不居中

所以我有这个旋转悬停的圆，但它不居中，我不知道为什么（我确实添加了'transform-origin：center center'）而且，对不起对css知之甚少，但当它有两个连续的选择器时，它意味着什么？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

谢谢你花时间！

来源

2017-05-12 Maëlle Jumel

它不在中心位置，因为您正在旋转的元素（#welcomeavatar）是显示：占用其容器全宽度的块。尝试添加宽度为204px的#welcomeavatar。 – EricL

其实你应该给#welcomeavatar一个200px的宽度和高度（和你的图片一样）。然后，您需要添加一些样式到您的图像，以摆脱摇摆。使图像显示：阻止并添加200px的高度/宽度。 – EricL

您的图片和#welcomeavatar元素的尺寸不匹配，并且您的图片不是正方形，所以即使匹配旋转的尺寸也不会使其无缝。您的图像具有2630x2565的自然分辨率，因此旋转中会有轻微摆动。 –

旋转实际上围绕中心，但是您应用旋转的div大于图像。见下图：

你要确保你旋转格正是大小内（即图像相同的删除宽度/高度从该div完全或添加宽度/高度与图像相同）。

另外，#speechbubble上的margin-left也随着悬停的增加而增加，因此再次旋转的div向左移动。在悬停和无悬停的情况下使边距相同，并且不会移动。

希望有所帮助。

来源

2017-05-12 18:14:16 dmoz

谢谢，删除div的宽度和高度确实有效。如果你有时间，你能告诉我什么时候放两个连续的div吗？而关于保证金是故意的！ –

很高兴工作。我不确定你的意思是“放两个连续的div”。把他们放在哪里？为什么？你可以解释吗？ – dmoz

Like this line： #welcome #welcomeavatar { -webkit-transition：all 0。7s缓进; -moz-transition：全部0.3s缓出; -ms-transition：全部0.3s缓出; -o-transition：全部0.3s缓出; 过渡：全部0.3s缓出; transform-origin：center center; } 有两个＃，我不知道那个后果吗？ –

显然我不知道如何堆栈溢出。我原来的评论作为一个实际的答案：

这是偏离中心，因为你正在旋转的元素（#welcomeavatar）是显示：块占用其容器的全部宽度。 使它显示内联块是不太理想的，因为它可以插入不需要的空白。

您应该给#welcomeavatar一个宽度和一个200px的高度（与您的图像相同）。然后，您需要添加一些样式到您的图像，以摆脱摇摆。使图像显示：阻止并添加200px的高度/宽度。

来源

2017-05-12 18:15:31 EricL

CSS旋转不居中

回答

相关问题