How to manage the div visibility during 3d transform?

1.	How to manage the div visibility during 3d transform?
Answer» <P>The difference between the two lies how the effective width of the container is calculated. The border-box & content-box belong to box-sizing property. The box-sizing property tell the browser how the effective width of the container to be calculated. content-box is based on DEFAULT css box sizing behavior. The RENDERED width of the container will include the container width+padding+border. Whereas the border-box tell the browser to include the padding & border values with-in the declared width for e.g. 200 PIXELS. So, the rendered width will be 200 pixels only. So, If you see in terms of historical perspective it behave as the earlier version of internet explorer box model whereas as the content-box is based on W3C box model computation. Code example HTML <div id="container-parent"> <p>I am a parent with two children. </p> <div id="container-border-box"> <p>I am child with <code>box-sizing:border-box</code> & i stay with in parent width limit.</p> </div> <br /> <div id="container-content-box"> <p>I am child with <code>box-sizing:content-box</code> & i love to cross the parent width limit.</p> </div> </div> CSS #container-parent { width: 400px; height: 300px; border: SOLID 10px DodgerBlue; margin: 0.8em; } #container-parent div { width: 100%; border: 10px solid SlateBlue; padding: 5px; } #container-border-box { box-sizing: border-box; } #container-content-box { box-sizing: content-box; }

Answer»

<P>The difference between the two lies how the effective width of the container is calculated. The border-box & content-box belong to box-sizing property. The box-sizing property tell the browser how the effective width of the container to be calculated.

content-box is based on DEFAULT css box sizing behavior. The RENDERED width of the container will include the container width+padding+border. Whereas the border-box tell the browser to include the padding & border values with-in the declared width for e.g. 200 PIXELS. So, the rendered width will be 200 pixels only.

So, If you see in terms of historical perspective it behave as the earlier version of internet explorer box model whereas as the content-box is based on W3C box model computation.

Code example

HTML

<div id="container-parent"> <p>I am a parent with two children. </p> <div id="container-border-box"> <p>I am child with <code>box-sizing:border-box</code> & i stay with in parent width limit.</p> </div> <br /> <div id="container-content-box"> <p>I am child with <code>box-sizing:content-box</code> & i love to cross the parent width limit.</p> </div> </div>

CSS

#container-parent { width: 400px; height: 300px; border: SOLID 10px DodgerBlue; margin: 0.8em; } #container-parent div { width: 100%; border: 10px solid SlateBlue; padding: 5px; } #container-border-box { box-sizing: border-box; } #container-content-box { box-sizing: content-box; }

How to manage the div visibility during 3d transform?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment