Hoy les traigo un poco de código para hacer un flipcard utilizando solo HTML y CSS. Es útil para añadir información extra sin ocupar espacio, además que le da dinamismo y movimiento a una sección estática.
Como verán, es una técnica muy simple y no requiere JS o JQuery. La estructura principal HTML también es muy simple: el contenedor general (flip-container), el recuadro (card), el frente y el dorso (front y back respectivamente). Luego, el CSS hace su parte y la magia sucede: la propiedad transform entran en acción. Esta propiedad de CSS3 es la que permite a un elemento cambiar su forma, tamaño o posición. Existen dos tipos de transformaciones: las 2D que suceden en un plano, y las 3D que parecieran moverse en el espacio.
El cuadro el ejemplo gira en forma horizontal. Pero si se fijan en la parte de código comentado, está la técnica para que el cuadro gire de forma vertical. Simplemente cambien una clase por otra y verán el resultado.
La utilicé en la sección Servicios de mi web principal, para que cada ítem tuviera una descripción sin agregar espacio extra. Y también la apliqué en el último proyecto web lanzado el mes pasado: Web del Dr. Carlos Ruiz Zepeda.
He aquí el código:
Aquí les comparto otro ejemplo de flipcard, también hecho puramente en HTML y CSS. Es un ejemplo responsivo, más avanzado. El toque que me gustó: ese llamativo efecto de «relieve» cuando el cuadro gira.
Por supuesto, pueden ir a los respectivos perfiles de Codepen y modificar el código para probar modificaciones antes de aplicar a sus proyectos. Hay muchas técnicas que se pueden aplicar a los flipcards, algunas más sofisticadas, con animación y efectos increíbles. En esta colección de Codepen reuní algunos ejemplos.
¡Espero que les haya gustado y lo puedan aplicar a sus proyectos!