How to scale a div without scaling content

Question

I have this div (id=\"myDiv\"), when the div is under css - scale all it\'s children are under scale as well. I need the div to enlarge but not the children, in a \"creative

Answer 1

You need to calculate backwards for the child elements.

For instance, you are scaling the div by 200% in the x axis...to reduce the children back to 100% you need to scale down to 50% (0.5)

Ditto for the y-axis 300%...therefore 33% (0.3)

CSS

.scaled { /* the parent */
    transform: scale(2,3);
    transform-origin:top left;
 }

.scaled * { /* the children */
   transform: scale(.5, .33); 
}

Jsfiddle Demo

NOTE: As you can see there are transform-origin issues as well and other spacing issues youl will need to address.

Answer 2

Your math is just off, as Paulie_D said, also, if you don't want spacing issues, I'd wrap the contents of the div in another div and control that div's margin-top, e.g.

<div id="myDiv">
    <div>
        <h3>Song</h3>
        <p>
            Strawberry fields forever
        </p>
    </div>
</div>

Here's a fiddle

Answer 3

If you scale to 0, your content will hide and if you scale to negatie value, it will flip. Child elements will always inherit scale from its parent so setting scale for children to 1 wont help either.

If possible, I recommend you not to use scale, but try to adjust your parent size manualy. Otherwise you can try to scale your parent div, but position your children absolutely within it (being in the same container with parent myDiv)