Поворот текста / карты в JS, CSS

Question

Это изображение того, что я имею в виду, когда половина текста опускается за «карточку» Таким образом, наши флип-карты почти работают без перегибов, однако, когда мы переворачиваем на ОБРАТНУЮ часть карты, есть небольшая задержка для отображения текста в полном объеме. Как вы можете видеть, текст вроде провала за карточкой блокирует половину ее прямо посередине. Кроме того, эта ошибка, кажется, происходит только в первый раз, когда вы переворачиваете карту. Если вы сидите и несколько раз переворачиваете карту вперед / назад, она фиксируется после первого переворота. Мы поиграли со временем перехода, углом Y и т. Д. 1019 *, но, похоже, не можем добиться идеального сальто. Буду признателен за любую помощь, и это мой первый раз здесь, поэтому, если я не сделал что-то правильно, я прошу прощения. Ниже приведена лишь часть кода. Если нужно больше, пожалуйста, дайте мне знать, также я попытался опубликовать скриншот проблемы, но это не привело бы к загрузке sh. Некоторые из css

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

Некоторые из JS

const getVisibleCards = () => {
    let currentCard = allCards[i];
    currentCard.classList.add('current-card');

    if (currentCard.classList.contains('next-card')) {
        currentCard.classList.remove('next-card');
    }
    if(currentCard.classList.contains('previous-card')){
        currentCard.classList.remove('previous-card')
    }
    //if there is a next card
    if (i < allCards.length - 1) {
        allCards[i + 1].classList = "single-card next-card"
    }
    //if there is a previous card
    if (i > 0) {
        allCards[i - 1].classList = "single-card previous-card"
    }
    if(i >= 2){ 
    allCards[i - 2].classList = 'single-card hidden-card'
    }
    if(i + 2 <= allCards.length){
        for(let nextHidden = i + 2; nextHidden <= allCards.length; nextHidden++)
        allCards[nextHidden].classList = 'single-card hidden-card'
    }

*** Еще немного JS

const flipCard = () => {
    //switch them
    currentCard = allCards[i];
    cardFront = currentCard.querySelector('.single-card__card-front');
    cardBack = currentCard.querySelector('.single-card__card-back');
    //ternary
    currentCard.classList.toggle("flip-show");
    cardFront.classList.toggle("flip-hide");
    cardBack.classList.toggle("flip-show");
};