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