Mostrar información simulando efecto 3D con CSS3 Transform

En este nuevo ejercicio o tutorial vamos a seguir viendo y a seguir practicando el uso de las propiedades de CSS3, la dinámica es ver un poco lo que podemos hacer con el poderoso CSS3.

En este ejercicio veremos como mostrar información oculta en un banner animado utilizando CSS3 y algunas de sus propiedades y así simularemos un efecto buen efecto 3D.

Esto es lo que vamos a conseguir:

Ver Demostración

efecto-3d-css3-transform

Si vistes el demo te habrás dado cuenta que el efecto es agradable y realista por lo menos en los buenos navegadores y que lo podemos usar para muchas cosas. Así que vamos a comenzar.

El HTML

Este HTML básicamente es la estructura de una caja en la que haremos el efecto con el CSS. Tenemos un div con clase “caja” padre dentro tenemos el contenedor con clase “item” dentro tenemos la imagen que se muestra por default  y después en un span tenemos el resto de la información a mostrar.

img01-3d-transform

Seguimos con el CSS

Muy bien, si has trabajado con las transformaciones en CSS3 el código anterior te resultara fácil y familiar, si no es así te lo voy a resumirlo un poco.
Con el .caja lo que hacemos es ubicar la caja, posicionarla, en mi caso quiero una al lado de otra por eso le doy inline-block, altura y anchura, márgenes y vertical-align, esto es para su posicionamiento en la escena, y de perspectiva 4000px.

Luego en el .tem le damos una altura de 100px y damos el como valor de transform preserve-3d para inducir a su condición 3d y una transición a la transformación que se hará cuando este en el estado :hover que tendrá una translación en el eje z de -50px y una rotación en el eje x de 95 grados. Esto hace que la animación ya tenga efecto 3d.

Luego aplicamos algunos estilos a la imagen que se muestra por defecto en el elemento con clase ítem, a este también aplicamos la transformación en el eje z de 500px para hacerla independiente a la del ítem.

Luego con los estilos de .tem .informacion mostramos el resto de información cuando hacemos hover sobre la imagen y esta haga el efecto de 3d, igual añadimos altura, fondo etc..

Por ultimo damos estilos a el elemento strong que esta dentro de la información que se trata del titulo, al enlace que esta en la información y también en su estado hover.

El CSS va con los diferentes prefijos de navegadores para la nuevas propiedades CSS3 para los que están con los navegadores desactualizados.

Y eso es todo, espero que te sirva de algo este ejercicio. Nos vemos en otro tutorial.

—————-

Ver Demostración

Archivos del Ejercicio

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

4 Respuestas

  1. ricardo dice:

    hola muy bien el aporte me ha sido de mucha ayuda graciasssssss
    mira una pregunta me puedes sugerir una pagina o un libro donde yo pueda aprender a fondo el css3 y javascrit. gracias por el aporte muy buena tu pagina

  2. alexcoolfree dice:

    Muy buen aporte, me sirve de mucho para un proyecto que estoy organizando.

  1. enero 16, 2014

    Muy buen aporte, me sirve de mucho para un proyecto que estoy organizando.