我真的很困惑使用 css 变换缩放元素如何影响文档流。
考虑这个 jsbin or 自从 jsbin 以来,这个 codepen 似乎已经下降了我在哪里
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 元素稍微重叠。此外,在开发工具中检查 #scaled 的尺寸显示它又矮又长,似乎超出了 100x100 的盒子。
最后,添加overflow: hidden;
#scaled 做了一些疯狂的事情。
到底是怎么回事?内容流应该如何受到影响?
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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)