En este post les mostrare paso a paso como como hacer unas tarjetas animadas con css, les mostrare el contenido del html y css. Si ustedes no tienen ningún conocimiento de lo anterior mencionado y no saben nada de css aquí les dejo un link para que vean los post anteriores de css y tengan ya una idea de lo que hablaremos aqui.
Estructura html para tarjetas animadas en css:
En este caso tendremos una estructura muy básica no tendremos tanto código, explicare paso a paso para que es cada etiqueta y para que sirve.
Teniendo en cuenta que yo solo les daré ejemplo de una sola imagen, pero ustedes pueden agregar todas las que quieran.
🌟 ¡Visita Nuestra Tienda para Programadores! 🌟Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!
Tenemos una etiqueta figure que sera la parte de alante de nuestra tarjeta y tenemos el figcaption que sera la parte de atrás de nuestra tarjeta, nuestra tarjeta hará un giro de 180 grados por eso necesitamos dos caras.
El figure esta dentro de la etiqueta a porque la imagen es un enlace, esta parte es opcional, si usted no desea que sea un enlace puede no colocar la etiqueta.
Estructura para tarjeta animada con css:
Como ya saben tenemos dos lados de la tarjeta, figure que es la parte frontal, el figcaption que es la parte trasera de la tarjeta esta es la que va tener el texto que es un titulo un hr ( que es la linea de separación) y un párrafo.
Transform:persepective(600px) rotateY(180deg)
Este código es la que da el giro a la tarjeta
