css - 3D transforms take up space even if taken out of flow? -

i'm rotating div in 3d space. it's pretty simple:

<div class="holder">   <div class="box">     <p>this text.</p>  </div> </div>  .box {     background: orange;     color: #fff;     font-size: 6em;     transform: rotatey(60deg);     padding: 20px;     position: absolute; } .holder {     perspective: 300px;     max-width: 600px;     margin: 0 auto; } 

i notice in ie11 , firefox, if transform makes shape run out of viewport, display scrollbars. happens if item out of flow, setting position: absolute. in chrome, no scrollbars displayed.

my understanding 3d transforms don't take additional space non-3d version of item, i'm not sure whey scrollbars appearing in browsers. correct behavior?

yes, correct behavior per spec: http://dev.w3.org/csswg/css-transforms-1/#transform-rendering

for elements layout governed css box model, transform property not affect flow of content surrounding transformed element. however, extent of overflow area takes account transformed elements. behavior similar happens when elements offset via relative positioning. therefore, if value of overflow property scroll or auto, scrollbars appear needed see content transformed outside visible area.

common workaround kind of behavior setting overflow: hidden on html element , reseting auto or scroll lower in dom, based on needs.