CSS3 3D Box!





CSS3 3D Box!
Drag it or use arrow keys rotate, [Enter] to turn, and [Page up/dn] to zoom. You can also use the buttons below.

This 3D effect is not using the HTML5 <canvas> tag.

This experiment can viewed only in Safari and Google Chrome 14+.
Top

Learn more about CSS3 3D at Surfin' Safari Blog.

This 3D box is created by Derek, 2011.

Left side

Note that the text remains selectable.
Back side
The only web browsers that currently support CSS3 3D are Safari and Google Chrome 14+ (Safari's rendering better.)

Input:
Checkbox:
Radio:
Bottom

CSS3 3D supports iframes too.
URL:
Made by Derek, 2011
Dragging using traqball.js by Dirk
Tweet
HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, Semantics, and Offline & Storage