CSS3 3D Furniture Showcase

A rotating 3D furniture showcase

利用技術: JavaScript, HTML5, CSS3,

  • 閲覧数 384
  • コメント数 0


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


Log in to add your own.

About this Demo

ソースをダウンロード 3016.86 KB · ZIP ファイル

Browse the Source

このデモは GPL ライセンスの下で公開されています。

IanLunn による他のデモ