Webkit 3D Cube using new CSS transformations

By June 6, 2009 Coding, Mobile

Paul Hayes has been playing with CSS transformations and making 3D cubes:

The impression of a three dimensional cube can be created 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).

This resulted in:

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

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

WebKit initially put this in (iPhone needed it after all!) and it will be interesting to see what users come out of it. The full CSS for the simple example is below:multiple-cubes-css

Vidal de Wit

Author Vidal de Wit

More posts by Vidal de Wit

Leave a Reply