强制转换元素影响文档流[关闭]

Posted 2023-03-06

【中文标题】强制转换元素影响文档流[关闭]

【英文标题】：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来伪造它

因绕过质量过滤器而关闭。

【参考方案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，你应该将他的答案标记为正确的答案。我会更新我的答案，因为它可能会误导搜索这个主题的人......