css - 相对于其他元素转换 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