Tarjetas animadas con CSS

Css

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.

tarjetas animadas

Teniendo en cuenta que yo solo les daré ejemplo de una sola imagen, pero ustedes pueden agregar todas las que quieran.

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  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:

tarjetas animadas

tarjetas animadas

tarjeta animadas

tarjetas animadas

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

tarjetas animadas

tarjetas animadas