Paul Hayes Follow @fofr on Twitter

3D CSS cube, use arrow keys, touch gestures or click and drag to rotate

This is a demo, learn how it works or take a peek at the CSS or JS behind it. Fork on Github.

3D cube

By Paul Hayes

3D cube built using css, webkit-perspective and webkit-transform. Rotation via webkit-transition.

Use arrow keys to navigate, or click and hold mouse. On touch screens, use one finger to rotate. Press ESC to reset.

Read more »

Learn how to make a cube

By Paul Hayes

“A 3D cube can be created solely in CSS, with all six faces.”

Article: Cube explanation

I design and build websites in Brighton

Nothing down here.

Uh-oh, your browser has no support for 3D CSS transforms. This video will show you what you’re missing. Show me the experiment anyway.