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까지 추가하고 블록을 추가하십시오.