8

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

考虑一下这个 jsbin或这个 codepen，因为 jsbin 似乎已经下降到我拥有的地方

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 蓝色方块的显示类似。但它被转移了，在 chrome 上甚至与下面的 p 元素略有重叠。此外，在 devtools 中检查#scaled 的尺寸显示为下蹲和长，似乎超出了它的 100x100 框。

最后，添加overflow: hidden;到#scaled 完全是一件疯狂的事情。

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

4

1 回答 1

14

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;
}
于 2013-01-17T19:56:31.243 回答