Question

我在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;
}

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

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

Answer 1

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

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

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

即使从流动中取出，3D变换也会占用空间？

1 个答案: