使用变换后删除高度

Question

让我在这里使用变换：

.parent {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}


.first {
  height: 100px;
}
    
.second {
  height: 100px;
  transform: translateY(-50%);
}

<div class="parent">
    <div class="first"></div>
    <div class="second"></div>
</div>

所以，使用变换后： translateY(-50%);父元素的高度应该减少，因为它没有使用完整的空间。但是父div的高度还是200px。

我们如何删除多余的空间而我只想使用转换？

https://jsfiddle.net/r4c3g02o/12/

Answer 1

translate 仅视觉上 移动元素。它不会影响文档中其他元素的流动。

也许实现您想要的结果的最简单方法是负边距。

.parent {
  border: 1px solid purple;
}

.first {
  height: 100px;
  background: yellow;
}

.second {
  height: 100px;
  margin-top: -50px;
  background: salmon;
}

<div class="parent">
  <div class="first">
    First
  </div>
  <div class="second">
    second
  </div>
</div>

Answer 2

我认为你可以使用 SVG 和 <animateTransform> 所以）