html - div 缩放为零宽度仍然占用空间

Question

这里中间的 div 没有显示出来，但是如果宽度没有缩放的话，它仍然占据了它本来应该占据的宽度。怎样才能让中间的div不占空间还用缩放变换呢？我不想使用 display: none;

<style>
div {
  display: inline-block;
  font-size: 3em;
}
</style>

<div>Your</div>
<div style='transform: scale(0, 1);'>&nbsp;potential</div>
<div>&nbsp;house</div>

我的最终目标是将它与 skrollr 一起使用，并在向下滚动时逐渐扩展中间的 div:

<style>
div {
  display: inline-block;
  font-size: 3em;
}
</style>

<div style='position: fixed;'>
  <div>Your</div>
  <div data-0='transform: scale(0, 1);' data-200='transform: scale(1, 1);'>&nbsp;potential</div>
  <div>&nbsp;house</div>
</div>

<script type="text/javascript" src="https://cdn.rawgit.com/Prinzhorn/skrollr/0.6.30/src/skrollr.js"></script>

<script type="text/javascript">
var s = skrollr.init();
</script>

用font-size代替transform也可以把里面的文字展开，但不是我想要达到的效果。

inline 导致中间的 div 始终显示。

Answer 1

给 font-size:0 或 width:0 来删除空格。

<style>
div {
  display: inline-block;
  font-size: 3em;
}
</style>

<div>Your</div>
<div style='transform: scale(0, 1);font-size:0'>&nbsp;potential</div>
<div>&nbsp;house</div>