3D Cube using CSS transformations

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.

multiple cubes css2 3D Cube using CSS transformations

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:

Related Posts

1

turn.js: A jQuery Page Flip Effect For HTML5

1

jQuery Multi-Node Range and Data Slider

YoutubeButton copy

How to Create YouTube Popup Buttons with CSS

Grid

A Quaintly Designed CSS Typographic Grid