tag: cube

3D Cube using 2D CSS transformations

Multiple cubes created using CSS

Update (July 21st): Using newly released (cur­rently only in Webkit Nightly releases) 3D trans­forms, a three dimen­sional, rotat­ing cube with cor­rect per­spec­tive is pos­si­ble, and as a bonus–the cube can be nav­i­gated using arrow keys. Check out the lat­est demo, “Ani­mated CSS3 cube using 3D trans­forms”.

The impres­sion of a three dimen­sional cube can be cre­ated using mod­ern CSS tech­niques, with­out the need for JavaScript, imagery, can­vas or SVG. Using the pro­pri­etary trans­form prop­erty to skew and rotate shaded rec­tan­gles, indi­vid­ual cube faces can com­bine to form a 3D object. Cur­rently only sup­ported in recent WebKit and Gecko based browsers, most impor­tantly Fire­fox 3.5+ -moz-transform (doc­u­men­ta­tion) and Safari 3.2+ -webkit-transform (doc­u­men­ta­tion).
Read More »