html - 变换比例和调整外部内容

Question

我有一个 div，我需要它在 0 和 1 之间缩放，但后面的内容保留在同一个地方。如何增加div，并修改其周围的内容？
JSFiddle link

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  transform: scaleY(0);
}

.div1 {
  transform: scaleY(1);
  background-color: royalblue;
  padding: 15px;
  transform: scaleY(1);
  transition: transform 2s;
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  height: 200px;
}

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

Answer 1

如果您更改 .div1 的高度而不是缩放它，页面的其余部分将随之调整。

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  height:0; padding-top:0; padding-bottom:0; /* need to adjust height and padding */
}

.div1 {
  background-color: royalblue;
  padding: 15px;
  height: 200px;
  transition: padding-top 2s, padding-bottom 2s, height 2s; /* animate the padding too */
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  width:200px; height: 100%; vertical-align:top; /* and some adjustments here */
}

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

希望这对您有所帮助!

---

编辑:OP 的评论现在已经改变了问题，所以这里有一个新的片段来解决这个问题。

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  transform: scaleY(0);
}

.transform:hover~.div2 {
  top:-230px;             /* Move div2 up by the height+padding of div1 */
}

.div1 {
  transform: scaleY(1);
  background-color: royalblue;
  padding: 15px;
  transform: scaleY(1);
  transition: transform 2s;
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
  position: relative;  /* use relative positioning */
  top: 0;              /* Initial position is where it normally is */
  transition: top 2s;
}

img {
  height: 200px;
  vertical-align:top;
}

<div style="margin-top: 300px">TEXT</div>
<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>