How does css scale transform affect document flow? - css

Question

I'm really confused how scaling an element using css transforms affects document flow.
Consider this jsbin or this codepen since jsbin seems to have gone down where I have
p{slipsum text}
#scaled
#scaled-content{some text}
p{slipsum text}
with the stylesheet
#scaled-contents {
height: 400px;
width: 400px;
background-color: blue;
color: red;
font-size: 3em;
}
#scaled {
transform: scale(0.25, 0.25); //browser prefixes...
width: 100px;
height: 100px
}
I would expect this to show up similarly to a single 100x100 blue square. But it is shifted and on chrome even overlaps the following p element slightly. In addition, examining the dimensions of #scaled in devtools shows at as squat and long, seemingly breaking beyond it's 100x100 box.
Finally, adding overflow: hidden; to #scaled does something crazy altogether.
What is going on? How is content flow supposed to be affected?

Answer 1

CSS Transform does not affect document flow. The DOM element will occupy it's original position and dimensions within the page flow.
So if you have 3 square div's of identical size, displayed inline in a row and apply a -webkit-transform: scale(2) to the center square, this square will scale up to 200% larger, scale from the center of its original position, and overlap both other squares.
Reference example:
http://jsfiddle.net/ypnEk/
HTML:
<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>
CSS:
.square{
margin-top:50px;
width:50px;
height:50px;
display:inline-block;
}
.one{
background:#222;
}
.two{
background:#888;
-webkit-transform: scale(2);
}
.three{
background:#ccc;
}