How does css scale conversion affect document flow?

Question

I am really confused about how scaling an element using css transforms affects the flow of documents.

Consider this jsbin or this coding, as jsbin seems to have gone down where I have it

p{slipsum text} #scaled #scaled-content{some text} p{slipsum text} 

with style sheet

 #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 expect it to look like a single blue square of 100x100. But it shifts, and on chrome it even slightly overlaps the next element p. Also, looking at the #scaled sizes in devtools shows how squat and long, seemingly breaking out of the 100x100.

Finally, adding overflow: hidden; #scaled does something crazy at all.

What's happening? How is the content flow supposed to be affected?

Answer 1

CSS Transform does not affect document flow. The DOM element will take its original position and dimensions in the page stream.

So, if you have 3 squares of divs of the same size displayed in a row in a row and applying -webkit-transform: scale (2) to the center square, this square will scale up to 200% more, scale from the center of its original position and overlap both others square.

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