CSS를 사용하여 div가 모든 방향으로 성장하도록 만드시겠습니까?

Question

HTML/CSS 페이지가 있습니다.이 페이지에서는 원 모양의 본체에 4 개의 div가 있습니다. 나는이 divs의 크기가 호버 위에서 증가하도록했습니다. 이것은 다음 줄로 넘어가거나 브라우저 창 크기가 다양 할 때를 제외하고는 잘 작동합니다 (여전히 작동하려고합니다). 그러나 내가하려고하는 일은 div가 마우스를 올리면 자랄 수 있도록하는 것입니다. div가 현재 진행 중일 때 오른쪽에서 아래로 자라기보다는 모든 방향에서 자랍니다. 누구든지이 문제를 알고 있습니까? http://www.somil.site90.net 여기

는 원 중 하나에 대한 코드입니다 : 여기

은 sitepage에 대한 링크입니다. 다른 3 개는 마진을 제외하고는 동일하지만, 나에게도 붙여 넣기를 원하면 알려주세요. 미리 감사드립니다!

#circ1 { 
    background: #c4c4c4; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
    position: relative; 
    margin: 100px 0px 100px 16%; 
    float: left; 
    -webkit-transition: all 500ms ease-in-out; 
    -moz-transition: all 500ms ease-in-out; 
    -ms-transition: all 500ms ease-in-out; 
    -o-transition: all 500ms ease-in-out; 
    transition: all 500ms ease-in-out; 


} 

#circ1:hover { 
    width: 250px; 
    height: 250px; 

} 

Answer 1

단순한 CSS3 만 사용하십시오.

#circ1:hover { 
    -webkit-transform: scale(1.5); 
     -ms-transform: scale(1.5); 
      transform: scale(1.5); 
} 

이 코드는 divs를 증가시킵니다. 여백의 경우

#circ1:hover + #circ2{ 
    margin: 100px 0px 100px 8%; 
    } 

Answer 2

매우 가깝습니다. 너는 이미 상대적인 위치를 가지고있다. 이제 div의 왼쪽 상단 모서리를 왼쪽으로 이동하면됩니다.

호버의 크기가 100px보다 크기 때문에 div를 50px (절반)만큼 이동해야합니다.

#circ1:hover { 
    width: 250px; 
    height: 250px; 
    top:-50px; 
    left:-50px; 
} 

그게 전부입니다!

Answer 3

CSS3 Transforms이 원하는대로 표시되는지 확인하십시오. 일부 업체 프리픽스가 필요하지만, IE 8 이하를 지원하지 않는 한 이탈하지 않아야합니다.

scale을 사용하고 싶습니다. 3D 변환도 있지만 덜 지원됩니다.