CSS 3D Dungeon Scene

A CSS experiment to push the transforms property to the max by creating an 'Action Adventure' video game inspired 3D dungeon.

This experiment came about as I had been enjoying playing with CSS 3D transforms and I wanted to see how far I could take it, so I set out to make a basic level from a game: three chambers connected by two bridges.

Earlier on in the creation of this experiement the dungeon did have three rooms/chambers, but what I quickly learnt was that browser support starts to become a little fragile as you increase the complexity of the scene. Some issues I came across were an irremedial drop in frame rate, depth sorting issues in Firefox and plane culling in iOS if the edges of the planes escaped the viewport, which I believe is iOS trying to save on performance.

I wouldn't recommend building a scene like this with HTML and CSS in production, as it would be of a far higher quality and more performant to use something like WebGL. I highly recommend anyone new to WebGL to check out the ThreeJS library, it makes WebGL a little easier to grasp and has a wealth of documentation.

HTML CSS Sass Javascript

View Experiment Source
CSS Dungeon Experiment

Contact