All Entries in Category: It’s a Cube

Paul describes the recipe for making cool 3D shapes using a dash of CSS3 and a crap load of HTML elements. The recipe includes the -webkit-transform-style: preserve-3d; statement which I hadn’t seen before. Apparently it makes sure that an element’s children share the same 3D space as their parent, instead of being flattened. Not that I have any real understanding of what that means or anything.

Kroc Camen told me I should check out the JavaScript- and HTML5 canvas-based demo by Mathieu ‘P01′ Henri. It’s an implementation of something called a Menger sponge. To me it looks like a sort of infinite 3D cubic Mandlebrot set. Whatever the hell it is, it’s damn hypnotic to watch. Amazingly this was implemented in a mere 521 512 321 (see the comment below) bytes of HTML5 and JavaScript code.

Found something called a “Morphing Power Cube” demo on the WebKit site. It spins, it’s 3D, it’s a cube. Far out.

Oh and it uses a WebKit CSS property called -webkit-backface-visibility, which I’ve never heard of before. It seems to have a very narrow usage in that you only use it “to specify whether or not an element is visible when it is not facing the screen.”

Paul Hayes made a 3D rotating cube and some animated sliding cubes, Zachary Johnson made an “isocube” with video, and Zoltan “Du Lac” Hawryluk made a cube that works in Moz, Opera, WebKit and IE.

So, we’re all set for cubes then.