Mozilla Demo Studio

  • Enviar una demo

CSS3 3D Furniture Showcase

A rotating 3D furniture showcase

Construido utilizando JavaScript, HTML5, CSS3,

  • 156 visualizaciones
  • 0 comentarios

Más sobre esta demo del autor

CSS3 3D Furniture Showcase uses CSS transforms to create a room that is filled with products. The user can navigate around the room either using the left and right keyboard keys or by clicking the "showcase" button.

When a product is clicked within the room, a fancybox modal appears with more information about that product as well as a button that allows the user to purchase it.

JavaScript is used to control the rotation of the room along with requestAnimationFrame for increased performance.

When the necessary technologies (3D transforms) aren't supported in a browser, the page will fallback to a more basic layout with full access to the product range still.

The demo relies on the following third party products:

- Modernizr (modernizr.com)
- Fancybox (fancybox.net)

Royalty free images from http://www.sxc.hu:

- Remote: http://www.sxc.hu/browse.phtml?f=view&id=1196729
- Pot Plant: http://www.sxc.hu/browse.phtml?f=view&id=860097
- Sofa: http://www.sxc.hu/browse.phtml?f=view&id=718857
- Picture frame: http://www.sxc.hu/browse.phtml?f=view&id=1205011
- TV: http://www.sxc.hu/browse.phtml?f=view&id=1361461

Creative commons video from: http://en.wikipedia.org/wiki/File:Guillemot_theora_conversion_test.ogv

Aún no hay comentarios.

Regístrate o identifícate para agregar el tuyo.

Obtén el código fuente

Descarga el arhivo ZIP 3016.86 KB · con el código fuente

Browse the Source

Esta demo se publica bajo una licencia GPL.

Más de IanLunn