【问题标题】:Force transformed elements to affect document flow [closed]强制转换元素影响文档流[关闭]
【发布时间】:2014-11-03 02:27:41
【问题描述】:

我想知道是否有任何方法可以强制转换的元素影响文档流

考虑一个这样的例子:[1] http://jsfiddle.net/pmpcanzn/

缩放后的元素如何与其他元素的位置交互而不与它们重叠?

当对元素应用变换(缩放、平移)时,元素似乎会保持它们的原点空间。有什么技巧可以改变吗?

我不是在寻找没有转换的解决方案。

【问题讨论】:

  • 你提到not seeking for a solution without a transform毫无意义,但是对于那些对IE和Chrome/Safari感兴趣的人,你可以通过zoom: 2;jsfiddle.net/hashem/pmpcanzn/1来伪造它
  • 因绕过质量过滤器而关闭。

标签: css animation transform


【解决方案1】:

恐怕这是不可能的。

正如 Hashem Qolami 所强调的,W3 transform rendering docs 表示:

变换确实会影响视觉渲染,但除了影响溢出外,对 CSS 布局没有影响。

【讨论】:

  • 这样做的原因是为了提升浏览器性能blogs.adobe.com/webplatform/2014/03/18/…。在我的情况下,我正在使用元素的高度过渡来创建效果幻灯片,而我可以使用转换转换来创建它并优化更好的移动性能。感谢您的回复!
  • stacking context 是完全不同的事情,这里不是这样。你误解了声明。实际上,转换后的元素不会充当 position: fixed 并且不会从正常流程中删除;它作为一个包含块用于位置:它包含的固定元素。 CSS 转换模块states: Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow.
  • 您引用的语句意味着fixed-positioned 元素将尊重转换后的父元素而不是视口。
  • @HashemQolami,你是对的......你应该将这个作为答案发布,srkoble,你应该将他的答案标记为正确的答案。我会更新我的答案,因为它可能会误导搜索这个主题的人......
猜你喜欢
  • 2013-01-01
  • 1970-01-01
  • 2012-10-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-04
  • 1970-01-01
相关资源
最近更新 更多