Question

我想在以下方面获得一些帮助：如何在使用scale和transform-origin时保留两个div之间的固定空间？ div可以是各种尺寸。

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;
}

Answer 2

最简单的方法是设置margin-bottom。这对于静态示例很容易（在您的示例中为margin-bottom: calc( -50px * ( 1 - 0.58 ) );），但动态值需要JavaScript。这是一个粗略的example：

ele.style[ "margin-bottom" ] = ele.getBoundingClientRect().height -
                               ele.clientHeight + "px";

请注意，每次元素的clientHeight更改（例如屏幕旋转或调整大小）时，您都需要运行它。各种库使这更容易，例如css-element-queries。

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

2 个答案: