Post

DOOM fully rendered in CSS. Every surface is a <div> that has a background image, with a clipping path with 3D transforms applied. Of course CSS does not have a movable camera, so we rotate and translate the scene around the user.

Amazing! Is there something in particular that landed to make this possible today, vs a year ago?

No, I don’t think so. Most of the complexity is actually in JavaScript with parsing the WAD file and calculating the positions of each DOM element. I do want to offload some of those calculations to CSS now that we have Math functions. Just because we can.

Nice! Incredible work

Thanks! I've now also implemented the CSS math and it works flawlessly. I just feed in the player location from the game loop as CSS properties and the whole scene renders around it. All completely in CSS.