How does css scale transform affect document flow?

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;
}