Cubemap using HTML5 and CSS Transform

Today at work I had to do a cubemap visualizer that must work in iOS, so the only approach was to use HTML5 and the some of the new CSS 3D transformations.

I have done it already in flash using the 2.5 API so I thought it shouldn’t be so hard to rotate several layers 90 degrees and move them around. It turned out it was, because the origins are kind of messed up in the new CSS 3D API and I couldnt find a good documentation about it.


Drag the image around to see the panoramic image, although some old browsers probably wont show anything.

It works perfect in iOS and Chrome, not so well in Firefox.

If you want to use it, it is all wrapped in a simple Cubemap class in javascript, just include it and use it 🙂

Leave a Reply


eight − 4 =