html - 在没有水平滚动条出现的情况下在窗口边缘稍微旋转一个div

Question

在页面顶部，我创建了四个在悬停时轻微旋转(旋转 5 度)的框/图 block 。这些盒子通过 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

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

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>