仅靠CSS、HTML复刻《DOOM》，程序员极限“整活”：把div元素当3D游戏引擎用

随后，浏览器的布局与合成系统会接管渲染工作，通过 CSS 的 transform 以及诸如 hypot、atan2 等数学函数，把这些元素渲染成定位在三维空间中的对象。

与其让 JavaScript 负责完整的三维几何计算，这个实现选择了一种更“偷懒”的方式：脚本只传递原始的坐标点，以及地板和天花板的高度等参数作为自定义属性，其余诸如墙体宽度、旋转角度等三角计算，全部交给 CSS 引擎来完成。

这种分工是有意为之的：游戏核心循环逻辑改编自《毁灭战士》开源 C 语言代码，由 JavaScript 负责运行，同时仅向 CSS 开放坐标数据、状态参数与少量自定义属性，构成轻量化渲染层。

元素绕 X 轴旋转 90 度来实现的，然后再借助 clip-path 的 polygon，或更新的 shape 语法，将其裁剪成任意形状的扇区多边形，从而支持复杂轮廓甚至奇偶填充规则。

在不同区域之间实现无缝纹理铺设的关键，是将背景位置锚定在“世界坐标系”中。例如，如果一个元素在水平和垂直方向分别偏移了 200px 和 400px，那么它的 background-position 就会被设置为 -200px -400px，这样纹理图案就能像被连续铺在一整块平面上一样对齐。

场景的移动方式也比较特殊：它并不是通过“摄像机”来移动视角（因为 CSS 本身并没有真正的摄像机概念），而是通过移动整个“世界”来实现效果。JavaScript 会记录玩家的位置和角度，并将其存储在四个自定义属性中，而 CSS 会对这些数值进行反向计算，使场景朝相反方向移动，同时通过额外的 translate 来补偿透视效果，其余部分则交给浏览器的渲染系统完成。

敌人和投射物的精灵渲染则依赖“广告牌（billboard）”技术：CSS 会让每个 sprite 始终面向观察者，在需要时通过 scaleX 进行镜像翻转，并使用 step 动画来推进精灵帧序列，而 JavaScript 只负责更新对应的状态属性。

场景光照、自动门、升降平台、弹道特效，统统被转化为可动态变更的样式状态问题。区域亮度以级联自定义属性存储，搭配亮度滤镜统一调暗昏暗区域，无需逐个修改场景元素；游戏大门通过自定义属性绑定 CSS 过渡动画，实现抬升开合，脚本仅需切换状态标签，动画播放完全交由浏览器原生驱动。

弹药弹道通过起点、终点坐标与飞行时长定义，CSS 依靠位移动画完成弹道位移，搭配独立旋转属性，让投射物始终朝向玩家。

现代布局特性还被巧妙用来实现游戏自适应适配。原版固定宽度的状态栏，被重构为文档对象模型独立组件，弹药数值、生命值、角色头像、护甲值、钥匙道具拆分展示，通过弹性布局自动排版，在窄屏设备上自动换行适配。

观战模式则新增一套 CSS 镜头逻辑。

跟随视角利用角度正弦、余弦函数结合计算属性，测算偏移数值，将镜头固定在玩家斜后方与斜上方；视角切换依靠独立的位移、旋转属性，让第一人称与第三人称跟随视角之间实现丝滑过渡。

性能与画面精度问题，也暴露了这套纯 CSS 方案的固有短板。包含数千个三维变形元素的大型地图，极易导致移动端苹果浏览器出现画面卡顿，甚至程序崩溃。

为此，Niels Leenheer 加入视域剔除机制，自动隐藏玩家视野外的几何模型。

基础版剔除逻辑由 JavaScript 编写，遍历场景元素，根据距离与角度切换隐藏属性。

Niels Leenheer 还测试了纯 CSS 剔除方案：通过样式参数定义可见性判定，结合延时动画与关键帧规则，利用样式特性实现元素的自动显示与隐藏。

局限性

《Doom》原生渲染的部分核心逻辑，很难直接复刻至 CSS 环境。

原版游戏会将天空纹理以纯二维形式，绘制在地图实体前方的虚拟墙体上；而CSS渲染必须构建完整三维空间，天空图层需要置于所有景物后方。

这一差异会导致原版被天空遮挡的模型暴露出来，Niels Leenheer 只能额外增加剔除规则，隐藏玩家视角中被天空墙体遮挡的物体。

Niels Leenheer 明确表示，该项目绝非 WebGL、WebGPU 专业图形渲染方案的替代品，性能瓶颈也客观存在，但这并非本次开发的核心目的。

他在分享中提到，这项开发旨在突破 CSS 的能力边界。三角函数运算、自定义属性动画、裁剪路径、SVG滤镜、锚点定位等成熟商用级 CSS 特性，都被赋予了标准制定者从未设想过的全新用途。

最终成品完整可玩，直观证明：只要合理运用大量`

`元素与现代 CSS 语法，无需调用任何图形编程接口，就能在浏览器中完整复刻《毁灭战士》的游戏世界。

长久以来，爱好者不断挖掘各类低门槛、非常规设备运行《毁灭战士》的可能性，CSS 只是最新的趣味载体。

也正如 Niels Leenheer 所言，如果说还有什么意义的话，那它至少回答了一个没人真正问过的问题：CSS 能不能跑《DOOM》？

答案是：可以。确实可以。

来源：
https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/

https://www.techspot.com/news/111922-developer-rebuilds-doom-using-only-css-html-turning.html

【活动分享】"48 小时，与 50+ 位大厂技术决策者，共探 AI 落地真路径。"

由 CSDN&奇点智能研究院联合举办的「全球机器学习技术大会」正式升级为「奇点智能技术大会」。

2026 奇点智能技术大会将于 4 月 17-18 日在上海环球港凯悦酒店正式召开，大会聚焦大模型技术演进、智能体系统工程、OpenClaw 生态实践及 AI 行业落地等十二大专题板块，特邀来自BAT、京东、微软、小红书、美团等头部企业的 50+ 位技术决策者分享实战案例。旨在帮助技术管理者与一线 AI 落地人员规避选型风险、降低试错成本、获取可复用的工程方法论，真正实现 AI 技术的规模化落地与商业价值转化。

这不仅是一场技术的盛宴，更是决策者把握 2026 AI 拐点的战略机会。