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 way" i tried 2 things which didn't work.. how to scale a div without scaling it's content ?

HTML

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

jQuery

$("#myDiv").css("transform", "scale(2,3)");   
//I tried to...
$("#myDiv").children().css("transform", "scale(-2,-3)");
$("#myDiv").children().css("transform", "scale(0,0)");

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.