创造生成性CSS世界

There’s something about isometric projections that evokes a cozy, nostalgic feeling. Most likely, the culprit is the wave of ’90s pixel-art classic games that etched the aesthetic into our collective memory, from Populous to Transport Tycoon.

等距投影有一种唤起温馨怀旧感的特质。最有可能的原因是90年代像素艺术经典游戏的浪潮，这些游戏将这种美学铭刻在我们的集体记忆中，从 Populous 到 Transport Tycoon。

In this article, we’ll explore how to recreate that same charm with modern CSS. More specifically, we’ll look under the hood of the newly released Layoutit Terrain Generator to learn how stacked grids and 3D transforms can be combined to create a fully addressable 3D space in the browser.

在这篇文章中，我们将探讨如何使用现代 CSS 重现这种魅力。更具体地说，我们将深入了解新发布的 Layoutit Terrain Generator，学习如何将堆叠网格和 3D 变换结合起来，在浏览器中创建一个完全可寻址的 3D 空间。

(If you want to dive deeper into how the grid 3D structure works under the hood, the CSS Voxel Editor article explores it in detail.)

(如果你想更深入了解网格 3D 结构的工作原理，CSS Voxel Editor 文章对此进行了详细探讨。)

Behold! A 3D terrain built entirely with stacked grids and transformed HTML elements: no canvas, no WebGL, just CSS doing its magic.

看啊！一个完全由堆叠网格和转换的HTML元素构建的3D地形：没有画布，没有WebGL，只有CSS在施展魔法。

After wrapping up the CSS Voxel Editor, I wanted a new challenge, something that pushed the limits of the stacked grid technique. That’s how I landed on a terrain generator, especially because it means expanding the shape grammar: to make it possible, we’ll need to build angles and slopes. But before all that can happen, we have to set the stage properly.

在完成 CSS Voxel Editor 后，我想要一个新的挑战，某种推动堆叠网格技术极限的东西。这就是我选择地形生成器的原因，特别是因为这意味着扩展形状语法：为了使其成为可能，我们需要构建角度和坡度。但在这一切发生之前，我们必须正确设置舞台。

The .scene element acts as our camera mount: it’s where depth begins with the perspective property. By assigning a generous value (of 8000px) we get an almost-isometric look with a slight, natural distortion. Every child of this parent container inherits transform-style: preserve-3d, which basically ensures that the 3D transforms work as expected.

.scene元素充当我们的相机支架：它是深度开始的地方，使用perspective属性。通过赋予一个慷慨的值（8000px），我们获得了几乎等轴测的外观，带有轻微的自然失真。这个父容器的每个...