Cómo crear una flipcard con HTML y CSS

¿Quiéres aprender a programar un flipcard? Solo necesitas HTML y CSS.

Primero comenzamos creando la estructura html:

<div class="flip-card">

        <div class="carta-interior">

          <div class="cara-fontral">
            <!--Aquí va el contenido de la cara frontal de la carta-->
          </div>

          <div class="cara-trasera">
            <!--Aquí va el contenido de la cara trasera de la carta-->
          </div>

        </div>
    </div>

Finalmente los estilos son los siguientes

      .flip-card {
        width: 300px;
        height: 500px;
        border: 1px solid #f1f1f1;
        perspective: 1000px;
      }

      .carta-interior {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.5s; /* Controla el tiempo de la animacion de giro */
        transform-style: preserve-3d;
      }

      /* Gira la carta horizontalmente */
      .flip-card:hover .carta-interior {
        transform: rotateY(180deg);
      }

      .cara-fontral, .cara-trasera {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }

      /* Estilos para la cara frontal */
      .cara-fontral {
        background-color: #ff0000;
        color: black;
      }

      /* Estilos para la cara trasera */
      .cara-trasera {
        background-color: rgb(0, 26, 255);
        color: white;
        transform: rotateY(180deg);
      }