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

SimpleWeather – Display The Weather Using jQuery

CSS Tutorial: CSS Properties CSS Syntax

1

Create Eye-Catching CSS Buttons With Pseudo-Elements

css logo

Creating an Accordion Image Gallery with Only CSS