我如何从每一侧缩小一个div，直达其中心而不从右到左

Question

这是我的尝试：https://codepen.io/alexyap/pen/kmqgyd

#box {
width: 50px;
height: 50px;
background: black;
transition: .9s ease;
transform-origin: 50% 50%;
}
.test {
width: 0 !important;
}
#button {
height: 50px;
width: 50px;
background: black;
color: white;
}

我认为变形 - 孔子会做到这一点，但显然没有

Answer 1

过渡 transform: scale()而是transform-origin将起作用，因为 transform -origin可与transform属性一起使用。并且无需指定它，默认情况下是中心。

$(document).ready(function(){
  $("#button").click(function(){
    $("#box").toggleClass("test");
  })
  
})

#box {
  width: 50px;
  height: 50px;
  background: black;
  transition: .9s ease;
}
.test {
  transform: scaleX(0)
}
#button {
  height: 50px;
  width: 50px;
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>
<div id="button">
  Click me!
</div>

Answer 2

我只会使用包装器：

$("#button").click(function(){
  $("#box").toggleClass("test");
})
  

.wrapper {  width: 50px;  }
#box {
  width: 100%;
  height: 50px;
  background: black;
  transition: .9s ease;
  margin: 0 auto;
}
.test {  width: 0 !important;  }
#button {
  height: 50px;
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="box"></div>
  <div id="button">Click me!</div>
</div>

codepen

Answer 3

尝试边距：50％;

你知道我的意思吗？

codepen

更新： margin: 25px 50px 75px 100px;

最高边缘为25px
右保证金为50px
底部保证金为75px
左边的边距为100px