移动端Flip Card无法翻转且页面链接冻结的问题求助

大家好，我做了一个带翻转卡片的页面，在桌面端显示和交互都正常，但到了移动端，翻转卡片完全没法触发翻转，而且页面上的链接还会出现冻结的情况。我排查了好久都没找到问题出在哪，有没有大佬能帮我看看需要修改哪里？

我的CSS代码： #

.flip-card {
  background-color: transparent;
  display: block;
  margin-left: auto;
  margin-right: auto;
  perspective: 1000px;
}

@media (max-width:767px) {
  .flip-card {
    width: 240px;
    height: 360px;
    padding-bottom: 32px;
  }
  .book-description {
    font-size: 14px;
  }
  .description-author {
    font-size: 12px;
  }
  .book-reservation {
    font-size: 13px;
  }
}

@media (min-width:768px) and (max-width:991px) {
  .flip-card {
    width: 600px;
    height: 900px;
    padding-bottom: 32px;
  }
  .book-description {
    font-size: 24px;
  }
  .description-author {
    font-size: 20px;
  }
  .book-reservation {
    font-size: 24px;
  }
}

@media (min-width:992px) and (max-width:1199px) {
  .flip-card {
    height: 240px;
  }
  .book-description {
    font-size: 9px;
  }
  .description-author {
    font-size: 7px;
  }
  .book-reservation {
    font-size: 13px;
  }
}

@media (min-width:1200px) {
  .flip-card {
    height: 300px;
  }
  .book-description {
    font-size: 12px;
  }
  .description-author {
    font-size: 10px;
  }
  .book-reservation {
    font-size: 13px;
  }
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transition: transform 0.6s;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-card-front {
  background-color: transparent;
  color: transparent;
  width: 100%;
  height: 100%;
}

.flip-card-back {
  background-color: transparent;
  display: block;
  transform: rotateY(180deg);
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.book-description {
  text-align: left;
  font-family: courier;
  color: black;
}

.book-cover {
  height: 100%;
  width: 100%;
  border: 1px solid #B53031;
}

.description-author {
  text-align: right;
  font-family: courier;
  font-style: italic;
  color: black;
}

.book-reservation {
  background-color: #b02b2c;
  border-radius: 4px;
  color: white;
  padding: 1px 10px 1px 10px;
  cursor: pointer;
  text-decoration: none;
}

.book-reservation:hover {
  color: white;
  background-color: #c43031;
  text-decoration: none;
}

.bottone-pagina-2 {
  background-color: firebrick;
  border-radius: 14px;
  color: white;
  padding: 10px 10px 10px 10px;
  font-size: 17px;
  cursor: pointer;
  font-family: inherit;
}

.bottone-pagina-2:hover {
  background-color: white;
  color: FIREBRICK;
  text-decoration: none;
  border-style: dotted;
  border-color: firebrick;
}

对应的HTML结构： #

<div class="col-md-3">
  <section class="WidgetHolder HtmlWidget first">
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <!-- inserire il link all'immagine della copertina del libro -->
          <img src=" https://milano.biblioteche.it/sites/milano/assets/CRESCENZAGO/Immagini-Crescenzago/97888997811700536075.jpg " alt="Avatar" class="book-cover">
        </div>
        <div class="flip-card-back">
          <p class="book-description">
            <!-- inserire la descrizione del libro -->
            Avere a cuore, conoscere e capire meglio il luogo in cui si è cresciuti o in cui si vive aiuta a ereditarne la tradizione e la vitalità. Questo è lo scopo degli autori: trasmettere ai lettori la storia del posto in cui hanno imparato a vivere, seguendo
            una tradizione ricca di umanità, solidarietà, religiosità e cultura. Ecco la storia di Crescenzago, storico quartiere milanese, raccontata per periodi secolari, con un focus sul Novecento, e arricchita da numerose immagini
          </p>
          <p class="description-author">
            <!-- inserire l'autore della recensione' -->
          </p>
          <!-- inserire il link a OPAC (al posto di #) -->
          <!-- recensione scritta da Cristina, bibliotecaria -->
        </div>
      </div>
    </div>
  </section>
</div>

<div class="col-md-3">
  <section class="WidgetHolder HtmlWidget first">
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src=" https://milano.biblioteche.it/sites/milano/assets/CRESCENZAGO/Immagini-Crescenzago/Storia-di-cimiano.jpg?r=89914 " class="book-cover">
        </div>
        <div class="flip-card-back">
          <p class="book-description"> il libro rappresenta un utile contributo nella ricostruzione delle vicende storiche di Cimiano dall'età antica a quella contemporanea. Con particolare attenzione sono trattate le trasformazioni sociali e culturali avvenute soprattutto dalla
            metà del xx secolo. </p>
        </div>
      </div>
    </div>
    <p> </p>
  </section>
</div>

<div class="col-md-3">
  <section class="WidgetHolder HtmlWidget first">
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src=" https://milano.biblioteche.it/sites/milano/assets/CRESCENZAGO/Immagini-Crescenzago/dino-barra-via-padova.jpg?r=63808" alt="copertina libro" class="book-cover">
        </div>
        <div class="flip-card-back">
          <p class="book-description"> Via Padova è considerata una delle "strade simbolo" di Milano e da diversi anni è diventata archetipo di periferia, non solo nel capoluogo lombardo. È sinonimo di quartiere multietnico e mutante anticipatore di tendenze sociali all'interno dei
            territori metropolitani per le questioni della convivenza tra culture diverse e dei diritti dei più deboli. La via Padova che oggi conosciamo inizia a prendere forma attorno all'ultimo ventennio dell'Ottocento. </p>
        </div>
      </div>
    </div>
    <p> </p>
  </section>
</div>

<div class="col-md-12">
  <section class="WidgetHolder ContentWidget first">
  </section>
</div>

<div class="col-md-12">
  <section class="WidgetHolder HtmlWidget first">
  </section>
</section>
</div>

备注：内容来源于stack exchange，提问作者Giulio