相关疑难解决方法(0)

我真的很困惑如何使用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蓝色方块相似.但是它被移动并且在铬上甚至略微重叠了下面的p元素.此外,检查devtools中#scaled的尺寸显示为蹲下和长时间,似乎超出它的100x100盒子.

最后,添加overflow: hidden;到#scaled完全是疯狂的事情.

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