CSS缩放变换如何影响文档流？

Question

我真的很困惑如何使用css转换缩放元素会影响文档流。

Consider this jsbin或this codepen since jsbin seems to have gone down在那里我有

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

与样式

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

我希望这同样显示了到一个100x100的蓝色方形。但是它被移位并且在铬上甚至与下面的p元素略有重叠。此外，检查devtools中#scaled的尺寸显示为蹲长，看似突破100x100框。

最后，将＃overflow: hidden;添加到#scaled完成一些疯狂的事情。

这是怎么回事？内容流应该如何受到影响？

Answer 1

CSS变换不会影响文档流。 DOM元素将在页面流中占据它的原始位置和尺寸。因此，如果您有3个相同大小的正方形div，并行显示并将-webkit-transform：scale（2）应用于中心方块，则此方块将放大至200％它的原始位置的中心，并且与其他正方形重叠。

参考例子：

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