Mozilla Demo Studio

  • Submit a Demo

CSS3 3D Furniture Showcase

A rotating 3D furniture showcase

Built using JavaScript, HTML5, CSS3,

  • 151 views
  • 0 comments

More About This Demo From The Author

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

No comments yet.

Register or log in to add your own.

Get the Source Code

Download the Source 3016.86 KB · ZIP File

Browse the Source

This demo is released under the GPL license.

More by IanLunn