保持CSS网格中旋转的方形div的宽度和高度（响应式解决方案）

Question

我试图使用CSS网格跨设备保持我的方形div的一致高度和宽度。我已经旋转网格以尝试制作“菱形”形状，但是当屏幕调整大小时，此形状会发生变化。如何在我的网格中保持一致的完美旋转方形宽度和高度，其中容器占据整个视口的高度和宽度？

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  transform: rotate(45deg);
  overflow: hidden;
}

.grid>div {
  border: solid 1px red;
}

.container {
  width: 100%;
}

.grid {
  width: 100%;
  height: 100vh;
}

<div class="container">
  <div class="grid">
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
  </div>
</div>

Answer 1

由于您正在旋转元素45deg，因此宽度/高度需要遵循以下公式：height = width = 50vh / cos(45deg) = 50vh / 0.707。你还需要调整transform-origin并添加一个小的翻译来纠正位置：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  transform: translateY(-29%) rotate(45deg);
  transform-origin:bottom left;
  overflow: hidden;
  width:calc(50vh/0.707);
  height:calc(50vh/0.707);
}

.grid>div {
  border: solid 1px red;
}

body {
  margin: 0;
    overflow: hidden;
}

<div class="grid">
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
  </div>

translateY(-29%)是在旋转之前将左下原点移动到左边缘的中心：

蓝色距离等于50vh - (100vh - Width) = 50vh - 100vh + 50vh/0.707 = 50vh*(1 + 1.414) - 50vh*2 = 0.414*50vh

如果我们将这个结果除以宽度（0.414/1.414），我们就有了29%。