css3 scale transform on parent div but keeping constant size in some of the associated divs

Question

I'm using css3 scale transform to scale a div that contains other divs inside.

The problem I have is that some of the inner divs I need to keep as they were, basically as if they were not scaled, their size should not change, however I do need to scale the parent div with everything else inside.

How can you reverse the scaling in some of the divs?
I am trying to apply an inverse scaling.
If the overall div had applied a value of 1.5 , I'm trying to find what value I should now scale the other divs to revert them visually to how they looked before.

Answer 1

If the parent div has been scaled by a factor of 1.5, then you need to scale the children by a factor of 1/1.5 = 0.(6) to keep their size constant.

example

In general, in order to cancel for a child element a scale transform that has been applied on the parent and has a scale factor of a, you need to apply another scale transform of factor 1/a on the child itself.

You either need to:

• compute manually the scale factor before you do anything else and then use it as it is in your code (example linked above)
• use a preprocessor to handle this for you (SASS example)
• use JavaScript to compute the scale factor needed for the child and to set the scale transform on the child