JS / CSS中的文本/卡片旋转

因此，我们的翻页卡几乎可以正常工作，但是当我们翻回卡的背面时，文本显示出来会稍有延迟。如您所见，文本在卡的后面浸入，使一半的文字直接向下居中。同样，此错误似乎仅在您第一次翻转卡时才会发生。如果您坐在那里并反复前后翻转卡，则在第一次翻转后它会自行修复。我们在过渡时间，Y角度度等方面进行了尝试，但似乎还无法获得完美的翻转。任何帮助将不胜感激，这是我第一次在这里提出问题，因此，如果我没有正确执行操作，我深表歉意。以下是一些相关的代码。如果还需要更多信息，请告知我，我也尝试发布该问题的屏幕截图，但无法完成加载。

.single-card__card-front {
  grid-area: middle;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.single-card__card-back {
  grid-area: middle;
  transform: rotateY(180deg);
  transition-delay: 2s;
  backface-visibility: hidden;
  opacity: 0;
}

.flip-show {
  transform: rotateY(-180deg);
  transition: all 0.5s cubic-bezier(0.24, 0.94, 0, 1.15);
  opacity: 1;
}

.flip-hide {
  transform: rotateY(-180deg);
  transition: all 0.5s cubic-bezier(0.24, 0.94, 0, 1.15);
  opacity: 0;
}