HTML 및 CSS3 : 요소를 계속 유지하는 방법

Question

CSS3를 테스트 중이며 지금은 전환을 사용하려고합니다. THIS은 제가 작업하고있는 웹 사이트입니다. 상단의 첫 번째 사각형 위로 마우스를 가져 가면 왼쪽으로 전환됩니다. 문제는 첫 번째 사각형이 움직이기 때문에 빈 공간이 있고 다른 사각형이 움직이고 있다는 것입니다. 나는 그 사각들이 물체가 움직일 때 여전히 머물러 있기를 바란다. 그렇게 할 방법이 있습니까?

CSS

.container { 
    margin: 0px auto; 
    border: 2px; 
    width: 545px; 
    height: auto; 
} 

.title { 
    margin: 0px auto; 
    width: 600px; 
    height: auto; 
    text-align: center; 
} 

.elemento1 { 
    float: left; 
    width: 266; 
    height: auto; 
} 

.elemento2 { 
    float: right; 
    width: 266; 
    height: auto; 
} 

.foot { 
    clear: both; 
} 

p.padding { 
    padding-bottom: 15px; 
    padding-top: 15px; 
} 

.anim { 
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s; 
} 

.anim:hover { 
    width:100px; 
    height:100px; 
    transform: translate(-50px,0px); 
    -ms-transform: translate(-50px,0px); /* IE 9 */ 
    -webkit-transform: translate(-50px,0px); /* Safari and Chrome */ 
    -o-transform: translate(-50px,0px); /* Opera */ 
    -moz-transform: translate(-50px,0px); /* Firefox */ 
} 

Answer 1

당신이 당신의 애니메이션이 이동할 이미 충분히 공백을 포함하는 포장 요소에 애니메이션 요소를 배치하기 만하면됩니다. 그런 식으로 이웃을 부딪 치는 대신 포장 요소 내부를 돌아 다니게됩니다.