Stripy Box Records and CSS3

I’ve been playing with some rotating cubes the last few days. First a quick introduction:


With the launch of modern web browsers like Firefox 3.5, Google Chrome and Safari 4, a whole new range of effects have become available to web developers through CSS3.

One of the more exciting additions is transforms and animations. Skipping over the philosophical argument of whether or not CSS should be concerned with these action based functions, we can get some really impressive functionality.

Sadly, a lot of this work seems to be tainted by the lack of standards. Everyone is building in support for these fun new properties (it’s even promised in IE9) but we’re going back to proprietary CSS. Things are finally getting to the point were you can stop worrying about IE6 hacks but (for now) a transform property will have to look like this:

-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);

It’s a conscious move on the part of Mozilla and Webkit to not support the standards until they become…standard (see W3C Draft Transform Standards). But for now it’s just introducing a whole load of effects which will only work in one browser or other…

Which brings me on nicely to what I’ve been playing with and which only works on Safari 4.

Stripy Box

When I was about 14, some of my friends formed a band. The Russian Wind Up Penguins (website still archived here) and obviously it needed a record company to release its version of teenage punk. Gave me the perfect excuse to play around and create Stripy Box.

Stripy Box Logo

It’s actually one of my favourite logos that I’ve created. At the time I spent a while trying to make a rotating cube using Flash which ended up horribly glitchy and slow.

Glitchy Rotating Cube

Click on the image to see the old Flash site. When playing around with CSS3 I found a great demo of a spinning cube with text on all faces, so I shamelessly borrowed the code and stuck my Stripy Box images on the side. Twenty minutes later and I have a wonderful keyboard controllable, glitch free rotating cube.

CSS Rotating Cube

Again, click the image to see for yourself (only works on Safari, remember). Mainly done using CSS3, in fact if I had a bit more time I could remove the keyboard control and have it rotate by itself with even less (maybe even no?) JavaScript.

Amazing what progress has been made. I look forward to seeing what else CSS3 has to bring. If you’re on Safari 4 (I really hope you are) then try out this demo of a flickr browser. Really awesome and so, so smooth.

Let’s just hope the standards get sorted before the community diverges too much.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>