Efecto flip para tarjetas con CSS y bootstrap4

Fecha de publicación: 09/07/20

Antes de empezar

Propósito del post

Conseguir una tarjeta con dos caras y una animación de giro para mostrar el reverso de esta. Usaremos bootstrap para tener una buena grid la cual será adaptable a móviles.

Objetivo

Conseguir una tarjeta con las siguientes caracteristicas:

  • Que tenga doble cara.
  • Que al poner el ratón encima muestre el reverso.
  • Adaptable a dispositivos móviles
  • Ajustar su funcionamiento con Bootstrap.
  • Que haga una animación para girar la tarjeta.
  • Adaptable a distintas cantidades de texto.

¿Qué necesitamos?

  • Un navegador, en mi caso Chrome.
  • Un editor de texto, en mi caso VSCode.
  • Conocer la grid de Bootstrap.
  • Conocimientos básicos de css.

Explicación

Estructura básica

Utiliza esta base css para empezar. Esto nos aplica gran parte de las caracteristicas que necesitamos.

                                
.flip-card {
  background-color: transparent;
  height: 300px; /* Es necesario una altura para que aparezca en la página */
  border: 0px;
  perspective: 3000px; /* Genera un efecto 3D */
}

/* Este contenedor nos posiciona los dos lados de la tarjeta */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Crea la animación para girar la tarjeta de forma horizontal cuando el ratón se pone encima*/
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  /*transform: rotateX(180deg);*/ /*si lo quieres con giro vertical*/
}

/* Estructura básica de las dos caras */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Estructura específica de la cara frontal */
/* Ajusta la imagen al tamaño de la tarjeta para hacerla adaptable*/
.flip-card-front-post > img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

/* Estructura específica de la cara trasera */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
					           
                            

Nos toca crear el html para poder visualizar lo que hemos hecho. Recuerda que usamos Bootstrap en su version 4 aunque nos vale cualquier versión.

					           
<div class="col-12 mb-5">
    <div class="card flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front"><!-- frente de la tarjeta -->
                <img src="la imagen que quieras poner" alt="imagen"><!-- Imagen frontal -->
            </div>
            <div class="flip-card-back"><!-- reverso de la tarjeta -->
                <div class="row no-gutters">
                    <div class="card-body">
                        <h5 class="card-title">Título</h5>
                        <p class="card-text pl-2 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui tellus, maximus ac lacinia vitae, hendrerit sed tellus. Quisque mattis nec tellus eu vehicula. Donec posuere egestas leo, a condimentum velit molestie vitae. Etiam neque nisl, faucibus nec consequat eu, aliquam a sapien. Maecenas finibus neque nec eros sollicitudin gravida. Phasellus et ultrices justo. Praesent dignissim pellentesque pretium. Nam tempus nunc laoreet luctus blandit. Cras feugiat nec mi ac fringilla.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
					           
                            

Una vez tenemos las dos estructuras básicas solo necesitamos ver el resultado.

imagen que usamos para el frontal de la carta
Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui tellus, maximus ac lacinia vitae, hendrerit sed tellus. Quisque mattis nec tellus eu vehicula. Donec posuere egestas leo, a condimentum velit molestie vitae. Etiam neque nisl, faucibus nec consequat eu, aliquam a sapien. Maecenas finibus neque nec eros sollicitudin gravida. Phasellus et ultrices justo. Praesent dignissim pellentesque pretium. Nam tempus nunc laoreet luctus blandit. Cras feugiat nec mi ac fringilla.

Estructura completa

Ahora veremos el CSS completo que he creado para mi tarjeta. Todo lo añadido es opcional asi que lo puedes quitar o cambiar por otra cosa

					           
/* card flip animation */
.flip-card {
  background-color: transparent;
  perspective: 3000px;
  /* Genera un efecto 3D */
  height: 300px;
  /* Es necesario una altura para que aparezca en la página */
  border: 0px;
  /*Elimina el borde predeterminado que tienen las tajetas en Bootstrap */
}

/* Este contenedor nos posiciona los dos lados de la tarjeta */
.flip-card-inner {
  position: relative;
  /* dejamos que la grid de bootstrap posicione la tarjeta */
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  /* duracion de la animacion */
  transform-style: preserve-3d;
}

/* Crea la animación para girar la tarjeta de forma horizontal cuando el ratón se pone encima*/
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Estructura básica de las dos caras */
.flip-card-front, .flip-card-back {
  position: absolute;
  /* necesario para posicionar las dos caras a la misma altura */
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* nos genera una sombra */
  box-shadow: 10px 10px 28px -5px rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
}

/* Estructura específica de la cara frontal */
.flip-card-front {
  /* Ajusta la imagen al tamaño de la tarjeta para hacerla adaptable*/
  /* Mascara para oscurecer la imagen y que se pueda ver el titulo */
}

.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.flip-card-front .mask {
  position: absolute;
  /* hacemos que ocupe toda la imagen */
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* color de la mascara */
  background-color: rgba(62, 69, 81, 0.5);
  /* redondeamos la mascara para que se ajuste a la imagen */
  border-radius: 0.5rem;
  /* Posición del título en la parte frontal de la tarjeta */
}

.flip-card-front .mask .align-end {
  position: absolute;
  top: 85%;
  left: 20px;
  color: #fafafa;
  font-size: 1.5em;
}

/* Estructura específica de la cara trasera */
.flip-card-back {
  background-color: #EDFFF6;
  transform: rotateY(180deg);

  /* Ajusta la altura del texto al centro de la tarjeta */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
                                
                            

Creamos la estructura HTML completa y ya tendremos una fantastica carta que usar en nuestra web.

					           
<div class="col-12 mb-5">
    <div class="card flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front"><!-- frente de la tarjeta -->
                <div class="mask">
                    <div class="align-end">
                        Título
                    </div>
                </div>
                <img src="la imagen que quieras poner" alt="imagen"><!-- Imagen frontal -->
            </div>
            <div class="flip-card-back"><!-- reverso de la tarjeta -->
                <div class="row no-gutters">
                    <div class="card-body">
                        <h5 class="card-title">Título</h5>
                        <p class="card-text pl-2 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui tellus, maximus ac lacinia vitae, hendrerit sed tellus. Quisque mattis nec tellus eu vehicula. Donec posuere egestas leo, a condimentum velit molestie vitae. Etiam neque nisl, faucibus nec consequat eu, aliquam a sapien. Maecenas finibus neque nec eros sollicitudin gravida. Phasellus et ultrices justo. Praesent dignissim pellentesque pretium. Nam tempus nunc laoreet luctus blandit. Cras feugiat nec mi ac fringilla.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                               
                            

Te recomiendo que mires cada apartado del css con paciencia ya que puede ser un poco dificil de entender a la primera y que te salgan errores gráficos. Una de las cosas con las que debes tener cuidado en con el border radius que todos deben tener el mismo valor, yo arreglo este problema con una variable en scss.

Título
imagen que usamos para el frontal de la carta
Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui tellus, maximus ac lacinia vitae, hendrerit sed tellus. Quisque mattis nec tellus eu vehicula. Donec posuere egestas leo, a condimentum velit molestie vitae. Etiam neque nisl, faucibus nec consequat eu, aliquam a sapien. Maecenas finibus neque nec eros sollicitudin gravida. Phasellus et ultrices justo. Praesent dignissim pellentesque pretium. Nam tempus nunc laoreet luctus blandit. Cras feugiat nec mi ac fringilla.

Conclusión

El resultado a mi parecer ha quedado genial y muy original para poder mostrar algunos datos u información.

Por sacarle punta a algo diré que se podria hacer la animación con click en vez de dejar el ratón encima ya que con el :hover puede resultar un poco molesto a algunas personas.