我真的很困惑如何使用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
}
我希望这与单个100×100蓝色方块相似.但是它被移动并且在铬上甚至略微重叠了下面的p元素.此外,检查devtools中#scaled的尺寸显示为蹲下和长时间,似乎超出它的100×100盒子.
最后,添加溢出：隐藏;到#scaled完全疯了.
到底是怎么回事？内容流如何受到影响？
解决方法
CSS Transform不会影响文档流. DOM元素将占用页面流中的原始位置和尺寸.
因此,如果你有3个相同大小的方形div,连续显示内联并将-webkit-transform：scale(2)应用到中心方块,这个方块将扩大到200％,从原来的中心开始缩放位置,并与其他两个方块重叠.
参考示例：
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;
}
