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.