How to visibly reverse the scale of a child element to non-transformed, when its parent is scaled up

Question

Consider you have a page (yellow background), with an element (grey line) that has a child element (dotted red); all the same pixel dimensions. The grey parent is scaled up to 1.5, which naturally makes its child also scaled up. To reverse the size of the child, visibly, to 1.0, I set the child's scale to 0.5. I expected the child to revert to a non-transformed 1.0 visually, but it does not. If I increase the scale of the child to 0.66, it appears non-transformed as intended. Is there any logic to apply here? To programmatically reverse the scale of a child element when its parent is scaled up? Thanks!

#region, #scaled-up, #scaled-down {
  position: relative;
  width: 200px;
  height: 100px;
}
#region {
  background-color: yellow;
  margin: 50px auto;
}
#scaled-up {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
#scaled-down {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
#scaled-up::before, #scaled-down::before {
  content: '';
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
#scaled-up::before {
  border: 2px solid grey;
}
#scaled-down::before {
  border: 2px dotted red;
}

<div id="region">
  <div id="scaled-up">
    <div id="scaled-down"></div>
  </div>
</div>

Yes there is logic behind this, First the height is set to 100px, then you upscale by 1.5. making it 150px height. by downscaling it to 0.5 you make it 75 instead of original 100. so making the downscale 0.66(and keep on going with the 6 to make it more right) will make it normal again — Ramon de Vries, Sep 09 '20 at 15:35
@RamondeVries thanks for the clarification. I'm somewhat aware of how it adds up. I suppose what I'm really trying to understand is the significance of the 0.666 (relative to the 1.5 parent upscale) and how it can be used systematically, for an infinite number of scale scenarios. Another-words, how would I of been able to calculate the 0.666 given a parent scale of 1.5? I only came up with it by manually adjusting the child's downscale, hence my dilemma. — Andy, Sep 09 '20 at 17:53
the upscale and downscale is simple math, if you first upscale any amount of pixels, then calculate howmuch pixels that would be, for example `height: 200px` upscaled by 3 will be `height: 600px`, downscaling that back to 200 would be dividing 600 by 3, wich will be 0.333, because 3 times 0.333 will almost be 1, and 1 in this case is the 600 you made earlier — Ramon de Vries, Sep 09 '20 at 19:46
@RamondeVries I was looking for a way to do this without calculating an element's pixels via JavaScript. Some sort of geometrical algorithm. But it was extremely helpful as I wasn't thinking of calculating pixel differences of the transformed elements, and was able to solve with your help. — Andy, Sep 09 '20 at 22:06
@RamondeVries I should mention that my application generates many different upscale percentages, so that's all I had to work with. I first got a parent/child element's width dimension after it's been upscaled, in pixels, using JS (225px). Then, I divided that upscaled width (225px) by the upscale percentage point applied (1.5), resulting in the original width (150px). Then I divided the original width (150px) by the upscaled (225px) getting the percentage point difference (0.666666667). I transform scaled the child element using this difference, and perfection! — Andy, Sep 09 '20 at 22:07

How to visibly reverse the scale of a child element to non-transformed, when its parent is scaled up

0 Answers0