다른 요소와 관련하여 scaleX를 변형하십시오.

Question

스케일을 조정할 때마다 필자는 인접한 요소를 적절하게 이동하려고합니다. 어떻게해야합니까? 규모를 지정할 때마다 인접 요소의 맨 위에 위치합니다. 그 반대에

jsbin

나는 내가 원하는대로 작동 width 값을 변경하는 경우, 아직 나는 전환에 width을 사용할 수 없습니다.

HTML :

<input> 
    <div class="foo"> 

CSS :

input{ 
    display: inline-block; 
    transition: all 1s ease; 
    transform-origin:left; 
} 
input:focus{ 
    transform: scaleX(2) 
} 

.foo{ 
    display: inline-block; 
    width: 200px; 
    height: 20px; 
    background-color: red; 
} 

Answer 1

하는과 같이, 초기 및 전환의 대상 값을 모두 설정하는 것을 잊지 마십시오 :

input{ 
    display: inline-block; 
    vertical-align: top; 
    transition: width 1s ease; 
    transform-origin:left; 
    width: 100px; 
} 
input:focus{ 
    width: 200px 
} 

JSBin illustrating this here