cssDOOM

About

Doom is id Software's 1993 first-person shooter. cssDOOM is a recreation of Doom whose 3D rendering — every wall, floor, sprite, and effect — is built from styled DOM elements positioned in 3D space with CSS transforms, rather than <canvas> or WebGL. The game loop and logic are written in JavaScript, using id Software's open-source Doom release as a reference; the renderer reads wall geometry (linedefs, sidedefs, sectors) straight out of the WAD file and uses CSS trigonometry functions to compute transforms. It supports mouse, keyboard, touch, and gamepad input.

How it differs from the original

The rendering pipeline is CSS-only (DOM elements plus CSS 3D transforms, clip-path, and animations) rather than canvas- or WebGL-based. Sky occlusion, which the original engine handled with a 2D rendering hack, can't be reproduced identically in this true 3D scene and is instead approximated through element culling.

Getting started

Playable directly in the browser at the project's live site. Mouse-look uses the Pointer Lock API, activated automatically when entering fullscreen via the on-screen icon (not F11); keyboard arrow keys and a gamepad's right stick turn at a constant rate, touch supports a drag gesture on the right half of the screen, and left click or the gamepad's right trigger fires the weapon.

Known issues & limitations

• compatibility: View Transitions cannot be used with CSS 3D scenes in Safari; the 3D scene flattens to 2D during transitions.
• compatibility: On Chromium-based browsers, textures can disappear during gameplay under certain circumstances.
• compatibility: Background images cannot use CSS custom properties without causing severe compositor issues.
• compatibility: On Safari, @starting-style transitions re-trigger continuously on 3D-positioned elements.
• Large maps can crash Safari on iOS, and Chromium-based browsers (Chrome, Edge) can experience textures randomly disappearing mid-game — an unresolved compositor issue not seen in Safari or Firefox.
• Safari can't combine View Transitions with the CSS 3D scene: it flattens the 3D perspective during a transition, making the game briefly appear flat.