CSSの回転が中心にない

Question

私はホバー上を回転しているこのサークルを持っていますが、それは中心になく、なぜ（私は '変換元：センターの中心'を追加しましたか）わからない また、 cssについてはごくわずかしか知りませんが、2つの連続したセレクタがある場合はどういう意味ですか？

は、ここに私のコードです：

#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が左に移動します。ホバーとノーホバーでマージンを同じにしても動きません。

希望に役立ちます。

Answer 2

どうやらスタックオーバーフローの方法がわかりません。実際の答えとしての元のコメント：

回転している要素（#welcomeavatar）が表示されているので中心から外れています：コンテナの幅全体を占めるブロックです。 インラインブロックを表示させることは、不要な空白を挿入できるため、理想的ではありません。

#welcomeavatarの幅と高さは200px（画像と同じ）にする必要があります。次に、イメージにいくつかのスタイルを追加して、ウォブルを取り除く必要があります。画像を表示する：ブロックし、200pxの高さ/幅を追加します。