Galería de fotos 3D con CSS3

Veamos un ejemplo de una galería de imágenes en 3D utilizando javascript y CSS3. Este ejemplo funciona en firefox, chrome, safari y opera, aunque ofrece un mejor rendimiento en los navegadores basados en webkit.

Haz click sobre la galería y pulsa las flechas izquierda y derecha de tu teclado para hacer girar la galería.

Para el desarrollo de este ejemplo hemos usado jquery. Creamos una figura con tantos lados como imágenes tenga la galería y las posicionamos en un espacio 3D utilizando las propiedad de CSS3 "transform", y la función "rotate". Para la animación, definimos otra propiedad CSS3 en la hoja de estilos, "transition", y animamos la propiedad "transform". Al modificar esa propiedad por javascript conseguimos la animación deseada.

Si estás viendo esta web en un navegador antiguo o en Internet explorer quizás no puedas apreciar el funcionamiento. Recomendamos usar los navegadores firefox o Chrome (siendo éste el que mejores resultados ofrece).

Descarga el código del ejemplo.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí