javascript - 如何在使用 scale 和 transform-origin 时保留两个 div 之间的固定空间？

Question

我想在以下方面得到一些帮助:如何在使用 scale 和 transform-origin 时保留两个 div 之间的固定空间？ div 可以有各种大小。

例子: https://jsfiddle.net/7dL9sbLk/

HTML:

<p>foo</p>
<p class="transformed">bar</p>
<p class="transformed">bar</p>
<p class="transformed">bar</p>
<p class="transformed">bar</p>
<p class="transformed">bar</p>

CSS:

 p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform-origin: 0 0;
  transform: scale(0.58) translateY(0);
  background-color: blue;
}

Answer 1

结合使用 Flexbox 和 Javascript 的一种可能解决方案 (Example) :

HTML:

<container id='flexbox-container'>
    <div class="transformed">bar</div>
    <div class="transformed">bar</div>
    <div class="transformed">bar</div>
    <div class="transformed">bar</div>
    <div class="transformed">bar</div>
    <div class="transformed">bar</div>
    <div class="transformed">bar</div>
    <div class="transformed">bar</div>
</container>

Javascript:

document.querySelectorAll( ".transformed" ).forEach( ele => ele.style["margin-bottom" ] = ele.getBoundingClientRect().height - ele.clientHeight + "px")

CSS:

div { 
  margin-top: 5px;
  width: 450px;
  height: 450px;
  background-color: teal;
}

#flexbox-container {
  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.transformed {
  transform-origin: 0 0;
  transform: scale(0.48);
  background-color: blue;
}