了解不触发布局的CSS变换

Question

我读到一些CSS变换属性不会触发布局：

缩放、旋转、定位、透明度。

这可能是一个显而易见的问题，但是这是否意味着它们将始终独立应用，而不考虑页面上的其他内容？

例如，当我使用translate（x，y）更改位置属性以向下移动一个框时，它不会推动下面的内容吗？ 我自己制作了一个演示，看起来改变位置完全脱离了DOM流程。

- sawa

---

位置和不透明度不是变换。它们确实会影响布局。 - BoltClock

根据 https://csstriggers.com/opacity，`opacity` 在 Blink/Gecko 中不会触发布局，但在 Webkit/Edge 中会触发。这是否不正确？ - Ilya Streltsyn

@Ilya Streltsyn：对我来说，这听起来像是“布局”的另一种定义。根据问题的措辞，似乎提问者指的是那个，而不是规范中定义的“布局”（布局并不会以这里和链接中描述的方式“触发”）。 - BoltClock

我也这么认为，基于“触发器”这个词。据我所知，在浏览器的渲染性能方面，“布局”和“回流”是同一个东西（http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout）。 - Ilya Streltsyn

Answer 1

是的，你说得对，transform 不会让其他元素围绕它流动。这就是为什么上面的 div 不会将下面的 div 一起向下推。

查看此链接以获取更多描述。

- Divyanshu Maithani