在 window 的边缘稍微旋转一个 div 不出现水平滚动条

Question

在页面顶部，我创建了四个 boxes/tiles，它们在悬停时会轻微旋转（旋转 5 度）。这些框通过 flexbox 定位和调整大小以跨越 window 的整个宽度。当悬停在最右边的框上时，其右下角移出右侧的 window，导致出现水平滚动条。

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

这是我的 html 和 css 以及一个 jsfiddle 页面（请注意，水平滚动条并不总是出现在 jsfiddle 中，具体取决于window 其中代码为运行):

.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>

在 window 的边缘稍微旋转一个 div 不出现水平滚动条

Slightly rotating a div at the edge of the window without horizontal scrollbar appearing

html

css

animation

rotation

display