Html 在窗口边缘稍微旋转一个div，而不显示水平滚动条

在页面顶部，我创建了四个框/瓷砖，它们在悬停时轻微旋转（旋转5度）。通过

flexbox

定位框并调整其大小，以覆盖整个窗口宽度。将鼠标悬停在最右边的框上时，其右下角将移出右侧的窗口，从而显示一个水平滚动条

我想避免出现滚动条。我尝试为包含框的

设置

display:none

，但这会干扰框的旋转，因为当框旋转时，它会在div的边界处切断它们。我想让盒子旋转的效果完全可见，同时避免水平滚动条

这是我的

html

和

css

以及页面的一部分（请注意，水平滚动条并不总是出现在JSFIDLE中，这取决于运行代码的窗口的大小）：

.banner{
边际：0px；
字体大小：10vw；
线高：1.2；
溢出x：隐藏；
}
.flex{
显示器：flex；
}
.行{
弯曲方向：行；
证明内容：之间的空间；
}
.盒子{
弹性：1；
文本对齐：居中；
边框：1px纯黑；
背景色：白色；
框大小：边框框；
游标：默认值；
}
.右转{
过渡：所有400ms缓解；
}
.向左旋转{
过渡：所有400ms缓解；
}
.向右旋转：悬停{
变换：旋转（5度）；
}
.向左旋转：悬停{
变换：旋转（-5度）；
}

1.


2.


3.


4.

为您的

主体添加
溢出-x:hidden
。演示：


正文{
溢出x：隐藏；
}
* {
字体大小：6vw；
}
.flex{
显示器：flex；
}
.行{
弯曲方向：行；
证明内容：之间的空间；
}
.盒子{
弹性：1；
文本对齐：居中；
边框：1px纯黑；
背景色：白色；
框大小：边框框；
游标：默认值；
}
.右转{
过渡：所有400ms缓解；
}
.向左旋转{
过渡：所有400ms缓解；
}
.向右旋转：悬停{
变换：旋转（5度）；
}
.向左旋转：悬停{
变换：旋转（-5度）；
}


1.


2.


3.


4.

overflow-x:hidden
在包含框的div上？您试图设置html，body{overflow:hidden；}？Or.top{overflow:hidden；}