Ejercicio: Flip Credit Card

En este ejercicio vamos a diseñar una tarjeta de crédito que al pulsar con el ratón sobre una de sus caras, gire y smuestre la cara inversa. Para ello, primero tenemos que diseñar cada una de sus caras por separado. Deben tener las mismas dimensiones y se aconseja utilizar Flex y/o Grid para crear su layout.

Luego, utilizaremos un contenedor para englobar ambas y utilizar position para superponerlas. Una vez hecho esto, debemos girarla para mostrar la cara inversa. Si desconoces Javascript, puedes simplemente hacer una animación CSS y que la tarjeta simplemente gire continuamente. Si conoces Javascript, la idea es que al pulsar la tarjeta, se gire.

• 1️⃣ Crear la parte frontal de la tarjeta.
• 2️⃣ Crear la parte trasera de la tarjeta.
• 3️⃣ Crear un contenedor global y usar position para superponerla.
• 4️⃣ Crear una animación que gire la tarjeta (se verá irreal)
• 5️⃣ Añadir perspectiva para que el 3D sea más realista.
• 6️⃣ Ocultar la cara trasera cuando se gira.
• 7️⃣ Si sabes Javascript, quitar animación y girar la tarjeta cuando haces clic sobre ella.