Viernes,
05 de Febrero 2010
Artículo en inglés

Efecto 3d con css puro sin javascript y estereoscopia opcional con gif


Después de hace mucho tiempo de ver esto:

T-rex 3D en gif animado

y hace poco ver esto otro decidí que era el momento de experimentar algo más con el 3d y css.

Efecto 3d con css

Si movemos el ratón por la parte superior podemos ver como vamos rotando alrededor de las letras. Para conseguir este efecto nos basamos en el pseudoselector :hover

Efecto de estereoscopia

Ahora un poco más movido. En cierta manera, esta es la fusión del efecto anterior con el de dar sensación de tridimensionalidad con un gif animado alternando entre la imagen de un ojo y de otro.

El efecto se aprecia más cuanto más diferencia hay entre el primer plano y el fondo. Me ha sido de gran ayuda este script de Blender, una herramienta fantástica.

blog comments powered by Disqus
Bookmark and Share