3D Rotating Cube in CSS3

I recently set out to see if I could make a cross-browser 3D rotating cube art gallery in only CSS3.

I’m not finished yet, but this solution is so simple I thought I’d share what I have so far.

Basically I have 4 walls with no floor or ceiling. I want to have a piece of artwork on each wall and rotate the display so the user can face a new wall with a new piece of art on it.

The code is simple, I’ve used CSS3 tranforms to achieve the 3D walls.

You can see the code listing for rotate3d_demo on GitHub.

Check out the rotate3d demo here.

Note that Internet Explorer 10 does work but the transition between one state and the other happens pretty much randomly compared to other browsers. IE 10 tries to spin the walls on their top left axis instead of, logically, spinning them in the direction of the translation.

EDIT: You may notice that the transition from the original to the 90 degree rotation is not perfect. That’s because each element is travelling directly to its destination instead of following a circular path equidistant from the centre. So in the middle of the animation, the walls are all much closer to the centre than they are at the end of it.

To fix this, I’d have to key-frame the animation in such a way as to make their paths circular.