CSS - Flip Card con contenido

 Flip Card con contenido al reverso 

Código:

HTML

 <div class="flip-container">

    <div class="card">

    <div class="front"></div>

    <div class="back">

        <ul>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/86/real-madrid" target="_blank">Real Madrid</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/132/bayern-munich" target="_blank">Bayern Munchen</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/estadisticas/_/id/359/eng.arsenal" target="_blank">Arsenal</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/160/fra.psg" target="_blank">Paris Saint-Germain</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/114/napoli" target="_blank">Napoli</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/estadisticas/_/id/817/team.al_nassr" target="_blank">Al Nassr</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/437/fc-porto" target="_blank">Porto FC</a></li>

        </ul>

    </div>

    </div>

    </div>

CSS

.flip-container {

  background-color: transparent;

  width: 150px;

  height: 100%;

  perspective: 1000px;

  margin: 0px 10px;

}

.card {

  position: relative;

  width: 100%;

  height: 100%;

  text-align: center;

  transition: transform 1s;

  transform-style: preserve-3d;

}

.flip-container:hover .card {

  transform: rotateY(180deg);

}

.front, .back {

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  display: flex;

  flex-flow: column;

  align-items: center;

  justify-content: center;

  font-size: 1.3rem;

}

.front {

  background: url(https://hammeringdown.com/wp-content/

uploads/2023/03/tactical-board.com-12.png?w=1024) no-repeat left /cover;

  color: #fff;

}

.back {

   background: url(img/libreta.jpg) no-repeat left /cover;

   transform: rotateY(180deg);

}

.back li{

   text-align: left;

}

.back li a{

   color: black;

   font-size: .8rem;

   margin-left: 30px;

   text-decoration: none;

}

.back li a:hover{

   color: rgb(233, 47, 0);

}