CSS3 3D Furniture Showcase

A rotating 3D furniture showcase

建立方法 JavaScript, HTML5, CSS3,

  • 187 次观看

有关此演示作者的更多信息

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

关于此演示

下载源代码 3016.86 KB · ZIP 格式

Browse the Source

此演示发布于 GPL 授权之下。

IanLunn 的更多作品