稍微旋转窗口边缘的div，不会出现水平滚动条

Question

在页面顶部，我创建了四个盒子/瓦片，它们在悬停（5度旋转）时略微旋转。这些方框通过flexbox定位和调整大小，以跨越窗口的整个宽度。将鼠标悬停在最右侧的框上时，其右下角移出右侧窗口，导致出现水平滚动条。

我想避免滚动条出现。我尝试通过为包含方框的display: none设置<div>来实现这一点，但这会干扰显示方框的旋转，因为它们在旋转时会在div的边界处切断它们。我想保持盒子旋转的效果完全可见，同时避开水平滚动条。

这是我的html和css以及页面的jsfiddle（请注意，水平滚动条并不总是出现在jsfiddle中，具体取决于窗口的大小其中代码正在运行）：

.banner {
  margin: 0px;

  font-size: 10vw;
  line-height: 1.2;
  
  overflow-x: hidden;
}

.flex {
  display: flex;
}

.row {
  flex-direction: row;
  justify-content: space-between;
}

.box {
  flex: 1;
  text-align: center;
  border: 1px solid black;
  background-color: white;
  box-sizing: border-box;
  cursor: default;
}

.rotate-right {
  transition: all 400ms ease;
}

.rotate-left {
  transition: all 400ms ease;
}

.rotate-right:hover {
  transform: rotate(5deg);
}

.rotate-left:hover {
  transform: rotate(-5deg);
}

<div class="top" id="top">
  <div>
    <div class="flex row banner">
      <div class="box rotate-right">
        <p>
          1
        </p>
      </div>

      <div class="box rotate-left">
        <p>
          2
        </p>
      </div>

      <div class="box rotate-right">
        <p>
          3
        </p>
      </div>

      <div class="box rotate-left">
        <p>
          4
        </p>
      </div>
    </div>

  </div>
</div>

Answer 1

为overflow-x: hidden添加body。演示：

body {
  overflow-x: hidden;
}

* {
  font-size: 6vw;
}

.flex {
  display: flex;
}

.row {
  flex-direction: row;
  justify-content: space-between;
}

.box {
  flex: 1;
  text-align: center;
  border: 1px solid black;
  background-color: white;
  box-sizing: border-box;
  cursor: default;
}

.rotate-right {
  transition: all 400ms ease;
}

.rotate-left {
  transition: all 400ms ease;
}

.rotate-right:hover {
  transform: rotate(5deg);
}

.rotate-left:hover {
  transform: rotate(-5deg);
}

<div class="top" id="top">
  <div>
    <div class="flex row banner">
      <div class="box rotate-right">
        <p>
          1
        </p>
      </div>

      <div class="box rotate-left">
        <p>
          2
        </p>
      </div>

      <div class="box rotate-right">
        <p>
          3
        </p>
      </div>

      <div class="box rotate-left">
        <p>
          4
        </p>
      </div>
    </div>

  </div>
</div>