Css3 scales in the parent div, but keeping a constant size in some related divs

Question

I am using css3 scale conversion to scale a div containing other divs inside.

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

How can you zoom in on some divs?
I am trying to apply reverse scaling.
If the general div applied a value of 1.5, I'm trying to find what value I should now scale for other divs to visually visualize them as they looked before.

Answer 1

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

example

In general, in order to undo the scale transformation for a child that has been applied to the parent and has a scale factor a , you need to apply another scale factor of 1/a for the child himself.

You either need:

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

Answer 2

The reverse operation of any scale is 1 / <scale> , therefore, by scaling the container 1.5 , you will need to scale the child elements 1 / 1.5 = 0.6

Unfortunately, according to the specification, you cannot just use CSS, for example:

 transform: scale(1/1.5); 

since scale is defined as scale(<number>[, <number>])

where <number>

either a number or zero or more decimal digits followed by a period (.) followed by one or more decimal digits

Thus, you will have to do the calculations yourself or use a dynamic style language, such as LESS , which supports this kind of operations .

Demo (web kit only)

Answer 3

If you, as suggested, use an inverted scale factor, then note that the child does not necessarily retain its original size during the scale conversion - this, of course, matters only if you allow the scale transformations to have a duration (for example, using transition: transform; ).

Answer 4

You can use a CSS variable to store your scale factor, and then calculate the inverse scale for children that have a specific class:

 .wrapper { transform: scale(var(--scale)); background: #ddd; } .wrapper > * { text-align: center; } .wrapper > .dontscale { transform: scale(calc(1/var(--scale))); } 

 <div class="wrapper" style="--scale: 0.8"> <h2>scaled title</h2> <p>scaled description</p> </div> <div class="wrapper" style="--scale: 0.8"> <h2 class="dontscale">not scaled title</h2> <p class="dontscale">not scaled description</p> </div> 

⋅ ⋅ ⋅

If you don't want any of the children to scale, another way to do this is to style your wrapper as a pseudo-element:

 .wrapper { position: relative; } .wrapper > * { text-align: center; } .wrapper::before { content: ""; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: scale(var(--scale)); background: #ddd; } 

 <div class="wrapper" style="--scale: 1"> <h2>title</h2> <p>description</p> </div> <div class="wrapper" style="--scale: 1.2"> <h2>title</h2> <p>description</p> </div> <div class="wrapper" style="--scale: 0.8"> <h2>title</h2> <p>description</p> </div>