Wie kann ein fester Abstand zwischen zwei Divs erhalten werden, wenn Skalierung und Transformationsursprung verwendet werden?

Question

Ich möchte im folgenden etwas Hilfe bekommen: Wie kann man einen festen Abstand zwischen zwei Divs erhalten, wenn man den Maßstab und den Transform-Ursprung benutzt? Die Divs können verschiedene Größen haben.

Beispiel: 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

Der einfachste Weg ist margin-bottom einzustellen. Dies ist für statische Beispiele einfach (in Ihrem Beispiel wäre das margin-bottom: calc(-50px * (1 - 0.58));), aber dynamische Werte benötigen JavaScript. Hier ist eine grobes example:

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

Hinweis müßten Sie es das Element client Änderungen (wie eine Bildschirm-Rotation oder Redimensionierung) jedes Mal laufen. Verschiedene Bibliotheken erleichtern das, wie css-element-queries.

Answer 2

Eine mögliche Lösung mit einer Kombination Flexbox und Javascript verwenden (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; 
}