Paul Hayes show us how to create three dimensional cube using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.

Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform (documentation) and Safari 3.2+ -webkit-transform (documentation). The result of this experiment is awesome A 3D cube created with CSS.

Demo: 3D cube created with CSS
Supported browsers: Safari 3.2+, Google Chrome, Firefox 3.5+

Demo: Experiment with multiple cubes and CSS transitions, still no JavaScript
Supported browsers: Safari 4+, Google Chrome

source : http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/

Incoming search terms for the article:

• jquery 3d cube
• html5 cube
• html5 3d cube
• jquery 3d box
• css cube
• 3D cube jquery
• cube html5
• html5 3d box
• 3d cube html5
• 3d box jquery