3D 变换占用 space，即使不在流程中也是如此？

Question

我正在 3D space 中旋转 div。这很简单：

<div class="holder">
  <div class="box">
    <p>This is some text.</p>
 </div>
</div>

.box {
    background: orange;
    color: #fff;
    font-size: 6em;
    transform: rotateY(60deg);
    padding: 20px;
    position: absolute;
}
.holder {
    perspective: 300px;
    max-width: 600px;
    margin: 0 auto;
}

我注意到在 IE11 和 Firefox 中，如果变换使形状运行超出视口，它将显示滚动条。通过设置 position: absolute，即使项目不在流程中，也会发生这种情况。在Chrome中，不显示滚动条。

我的理解是 3D 转换不会比项目的非 3D 版本占用任何额外的 space，所以我不确定乳清滚动条是否出现在某些浏览器中。这是正确的行为吗？

Answer 1

是的，根据规范这是正确的行为：http://dev.w3.org/csswg/css-transforms-1/#transform-rendering

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area.

此类行为的常见解决方法是在 html 元素上设置 overflow: hidden，然后在 [=20= 中将其重置为 auto 或 scroll ], 根据您的需要。

3D 变换占用 space，即使不在流程中也是如此？

3D transforms take up space even if taken out of flow?

css

css-transforms