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中间的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>