Webkit 3D Cube using new CSS transformations

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

VN:F [1.8.3_1051]
Rating: 0.0/10 (0 votes cast)
VN:F [1.8.3_1051]
Rating: 0 (from 0 votes)
Leave a Reply

You must be logged in to post a comment.