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旋轉不居中

回答

相關問題