CSS Scaling a div but want html to remain at normal scale

Question

I have an HTML and CSS as follows:

<div class="box" style="transform: scale(2);">
    <div class="text">This is my text.</div>
</div>

How do I keep the text from scaling when the outer box does via animation?

Answer 1

On theory you can't. The scale will work on the entire element and inner child tree. But you can make it look like it's scaling up. Something like that (this method is lighter on the GPU and browser drawing):

<div class="box" style="position: relative">
   <div class="box-block" style="position: absolute; transform: scale(2);"></div>
   <div class="text">This is my text.</div>
</div>

So the idea is:

1. You have a container element
2. You have two inner holding blocks
3. You animate the one, that looks like the box and scale it.
4. Text div will never be touched by the animation, because it's in a separate element.

The structure could be improved, hope that gives you an idea. Cheers!

Answer 2

you need to scale the inner div by 1 divided by original scale (in your case 1 divided by 2 is 0.5):

<div class="box" style="transform: scale(2);">
    <div class="text" style="transform: scale(0.5);">This is my text.</div>
</div>