如何只缩放外部div而不是内部div

Question

I zoom a div using -moz-transform: scale(3.2) , but I only want to zoom the outer div and not the content (other divc) within that div.

here is my code

<div id="div1" style="-moz-transform: scale(3.2);" >
    <div id="div2">
        content
    </div>
</div>

Here I zoom the div1 , however div2 also zooms. I only want to zoom div1 but not div2 , meaning that the content of div2 will still be displayed as is.

Answer 1

You can add -moz-transform: scale(0.3125) to offset the parent scale. Basically 0.3125 = 1 / 3.2 where 3.2 is the scale factor applied to the parent.

 <div id="div1" style="-moz-transform: scale(3.2);-webkit-transform: scale(3.2); transform: scale(3.2);" > <div id="div2" style="-moz-transform: scale(.3125);-webkit-transform: scale(.3125); transform: scale(.3125);"> content </div> </div> 

Answer 2

You can invert a CSS scale by applying the reciprocal scale value on the child, eg if you have transform: scale(4); on the parent you need scale 1/4 on the child: transform: scale(0.25); :

 div { width: 50px; height: 50px; } #div1 { transform: scale(4); border: 1px solid red; margin: 100px; } #div2 { transform: scale(0.25); border: 1px solid green; } 

 <div id="div1"> <div id="div2"> content </div> </div> 

In your case, you need transform: scale(0.3125); , the reciprocal of 3.2 .