"He tomado el cuadro Las Meninas y he creado este efecto pseudo-3D con CSS. Es CSS puro, sin javascript ni flash; sólo código CSS y HTML.
Para la realización he usado tres imágenes: dos se corresponden al fondo (paredes) y otra de sprites (3 sprites: uno con el lienzo, niño y perro, otro con las meninas, y el último con la monja y acompañante). El posicionamiento de los sprites se realiza mediante hover en un total de 80 anchors. El lateral derecho de la habitación se ensancha y contrae para mejorar el efecto 3D.
Hay algunos truquitos para que el hover funcione correctamente, podéis verlos en el código fuente. Para que no interfieran las imáges en el hover, he usado distintos z-indexs y nbsps con tamaño de fuente de 455 píxeles: el mismo alto que el experimento en sí.
Funciona en las últimas versiones de los navegadores más usados y válidos".
La explicación a todo esto y el making off en el blog de Román Cortés
No hay comentarios:
Publicar un comentario