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.
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).
Comentarios