Noticias 

Mostrar información como efecto 3D con CSS3

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 poderosoCSS3.
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:
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.
Posteriormente aplicamos algunos estilos a la imagen que se nos 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.

Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Entradas relacionadas