css - Overflow X 不适用于 CSS Transform 属性

Question

我正在制作将旋转 div 的网站。 我正在使用推特 Bootstrap 。其中一个 div 的代码是:

HTML:

div class="row">
    <div class="col-md-12 cold-sm-12 col-xs-12 rotadedDiv-one">
    </div>
</div>

CSS:

.rotadedDiv-one {
   background: #412B57;
   -webkit-transform: rotate(-1deg);
   -ms-transform: rotate(-1deg);
   transform: rotate(-1deg);
   padding: 130px 10% 80px 10%;
   z-index: 5;
}

我遇到的问题是，由于 div 是旋转的，所以有一个小的溢出(大约 10-20 像素)。我试图通过以下方式摆脱它:

html, body {
   overflow-x: hidden;
}

并添加 overflow-x: hidden; 到 rotadedDiv-one，但它们不起作用。他们从底部移除了滚动条，但是如果您单击鼠标滚轮并向右移动，或者通过选择文本并向右移动，您仍然可以向右滚动。

此外，我尝试使用 overflow-x: hidden; 制作包装器 div，这将在 中，但它没有用。任何帮助都意味着很多。谢谢。

Answer 1

可以正常使用吗overflow而不是 overflow-x ？ overflow 有更好的支持，并且会阻止滚动条出现在 x 和 y 方向上。

html, body
{
    overflow: hidden;
}

overflow-x 和 overflow-y很方便，但仍被列为“实验性”，并且可能无法很好地与 -webkit-transform 等专有属性一起使用。

它们像这样分解:

• overflow 改变元素的行为方式，如果它的任何子元素至少部分呈现在元素之外的任何地方。
• overflow-x 如果元素的任何子元素至少部分呈现在元素的左侧或右侧之外，则该元素的行为方式会发生变化。
• overflow-y 如果元素的任何子元素至少部分呈现在元素的上方或下方之外，则该元素的行为方式会发生变化。