背景
如果你认为CSS只能用来排版文字和画圆角矩形，那么CSSQuake会颠覆你的认知。一位开发者利用纯CSS 3D变换（transforms），在浏览器中完整复刻了经典FPS游戏《雷神之锤》（Quake）的渲染引擎——没有WebGL，没有Canvas，只有CSS。
核心技术创新
CSSQuake的核心原理是使用CSS 3D perspective和transform矩阵来模拟3D场景中的顶点投影、纹理映射和深度排序。项目将Quake的地图数据（BSP树结构）解析后，每个墙面、每个多边形都转化为对应的CSS元素，通过transform: matrix3d()完成空间变换，利用z-index处理遮挡关系。更惊人的是，CSS动画被用来驱动游戏循环，通过requestAnimationFrame同步更新DOM元素的transform属性，实现了流畅的第一人称视角移动。
技术剖析
从实现的深度来看，CSSQuake并非简单的概念验证。它完整支持了BSP地图加载、玩家移动与转向、碰撞检测，甚至在CSS层面实现了基本的纹理映射（通过background-image和background-position模拟）。项目将每个可见的多边形面渲染为一个独立的div元素，使用3D变换矩阵将世界坐标映射到屏幕空间。这种”一个面一个div”的暴力渲染策略虽然在性能上远不及GPU光栅化，但在技术演示层面展现了CSS规范的惊人潜力。
社区反响
Hacker News社区对此项目给予了高度评价（441分）。用户jedberg评论道：”这是一个了不起的成就，但我忍不住注意到Quake在CSS版里跑得比原版还顺滑——这本身就很说明问题。”另一位用户badsectoracula补充：”令人印象深刻的技术。我猜这不只是渲染器用了CSS，还包含了一个完整的游戏逻辑层。”AzzieElbab则幽默地表示：”太棒了！退出比vim还难。”社区普遍认为这个项目是CSS能力边界的一次精彩探索，尽管实际应用价值有限，但其展示的技术创造力和对Web标准的深度理解令人敬佩。
意义与展望
CSSQuake的意义不在于它是Quake的最佳运行方式——显然不是。它的价值在于挑战了开发者对CSS能力的固有认知，展示了Web平台的惊人灵活性和CSS规范的长远演进。当大多数开发者还在争论Tailwind还是CSS-in-JS时，这个项目提醒我们：CSS本身就是一个图灵完备的渲染引擎，只是我们很少将其推向极限。项目已在GitHub开源，是一个绝佳的学习CSS 3D变换和浏览器渲染管线的实验素材。
🔗 项目地址：cssquake.com
🔗 HN讨论：news.ycombinator.com/item?id=48608223