Css 3D变换会占用空间，即使从流程中移除？

我正在三维空间中旋转一个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;
}

这是一些文本

.盒子{
背景：橙色；
颜色：#fff；
字号：6em；
变换：旋转（60度）；
填充：20px；
位置：绝对位置；
}
.持有人{
透视图：300px；
最大宽度：600px；
保证金：0自动；
}

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

---

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

是的，根据规范，这是正确的行为：

对于布局由CSS框模型控制的元素，transform属性不会影响转换元素周围的内容流。但是，溢出区域的范围考虑了转换的元素。此行为类似于通过相对定位偏移图元时发生的情况。因此，如果overflow属性的值为scroll或auto，则会根据需要显示滚动条，以查看在可见区域外转换的内容

这种行为的常见解决方法是在

html

元素上设置

overflow:hidden

，然后根据需要将其重置为

auto

或

scroll

DOM中的较低位置