Diseño 3D con CSS
Programación web
Dar vida a imágenes usando CSS
Hoy traigo un diseño CSS más visual, y es que en esta ocasión vamos a jugar con el CSS para que una imagen integrada con HTML haga un flipbox y nos muestre otra imagen en su parte trasera (aquí llamada class=»back»). A lo largo de los días iré añadiendo más cambios y mejoras ya que el CSS como ya he dicho, esta hecho para jugar , practicar y seguir mejorando nuestra página.
Código HTML de nuestra tarjeta gatuna
En este html encontramos 4 tipos de contenedores. El container que agrupa todo el contenido, el div class=»card» para el diseño de nuestro tarjeta, y el que contiene la imagen 1 frontal y la imagen 2 lateral (la que aparece cuando pasemos el ratón por la imagen)
Código CSS para dar crear el efecto 3D de nuestra tarjeta
El CSS es muy divertido. Mi recomendación es que vayas practicando con las posibilidades que te brinda este lenguaje. Prueba ID, divs, clases,… para sacar el máximo partido a tu diseño web.
