网格容器中元素旋转时为何会向下偏移约1像素？

当鼠标悬停触发div旋转时，div内的内容会向下偏移约1像素，且该现象仅在特定视口高度下出现。

最小复现代码 #

CSS代码 #

.header {
  background-color: orange;
    height: 30vh;
}
.container {
  display: grid;
  height: 100px;
  width: 100px;
  border: 1px solid red;
}

.front {
  grid-area: 1/1;
  background-color: blue;
}

.back {
  grid-area: 1/1;
  background-color: red;
  transform: rotateY(180deg);
}

.back,
.front {
  backface-visibility: hidden;
  transition: transform 1s;
  margin: 1rem;
}

.container:hover .back {
  transform: rotateY(0deg);
}

.container:hover .front {
  transform: rotateY(180deg);
}

HTML代码 #

<div class="header"> HEADER </div>
<div class="container">
  <div class="front">
    <h2>One</h2>
  </div>
  <div class="back">Two</div>
</div>

该问题并非在所有屏幕高度下都会出现，打开开发者工具逐步缩小屏幕高度，在每个高度尝试鼠标悬停，即可在特定高度触发元素偏移，这会导致卡片翻转动画效果变差。

内容的提问来源于stack exchange，提问作者Magnus