css - 如何纠正由 transform:translateY() 导致的页面中断流？

Question

我transform:translateY()用来向上移动一个元素，但它下面的元素不跟随移动；没关系，我知道这不应该影响页面的流程，但是有没有办法强制下面的元素与接收的元素一起上升transform？

我也可以设置transform其他元素，但是它们有很多，所以这不是一个非常干净的解决方案。

我还考虑过将所有内容包装在 div 中并transform仅设置为 div。它会起作用的。但是，如果有另一种无需接触 HTML 的方法，那就太好了。

.container {
  height: 150px;
  width: 500px;
  background-color: #ccc;
  color: #fff;
}

.container div {
  height: 40px;
}

.container div:first-of-type {
  background-color: red;
  width: 100%;
} 

.container div:nth-of-type(2) {
  background-color: green;
  width: 80%;
  
  transform: translateY(-50%)
} 

.container div:nth-of-type(3) {
  background-color: blue;
  width: 100%;
}

<div class="container">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

标签： csscss-animationstransform