How Layoutit Voxels Turns Voxel Models into CSS Code

Updated

Layoutit Voxels builds a model from HTML cuboids and exports the CSS that positions them in 3D, so you can paste the result into a web page. The editor describes itself as "a voxel editor powered by CSS grid and 3D transforms" that lets you "build models with HTML cuboids." In practice, each voxel becomes an element, and the exported stylesheet carries the grid placement and transform values that give the model its shape. This explanation covers the mechanism, what the export contains, and how to use it.

The core mechanism: cuboids on a CSS grid

The editor does not generate a 3D model file for a renderer. It works in the browser's own layout system:

  • HTML cuboids are the building blocks. A voxel is drawn as a box-shaped element rather than a mesh.
  • CSS grid provides the coordinate space. Rows, columns, and depth settings in the editor's config panel define the grid the model sits on.
  • 3D transforms place and orient each cuboid within that space, which is what makes a flat grid read as a three-dimensional object.

The toolbar's shape options — cube, slab, wedge, spike — indicate that not every cell is a full cube; the export has to account for the chosen shape as well as its position.

What the CSS export contains

The interface offers Export VOX, CSS, VOX TXT, PNG, Copy, Embed, Open Codepen, and Download Code. The CSS path is the one that produces web-ready styling: the styling needed to render the voxel model, which you can copy to the clipboard or download as code. The other formats serve different purposes — VOX and VOX TXT are model-data formats, and PNG is an image — so choose CSS when the goal is a live, styled element on a page rather than a file to open elsewhere.

The editor also reports voxels, facets, and size (~KB) for the current model. These are useful before exporting: a high voxel and facet count means more elements and more CSS, which is the main thing to watch if the model will sit on a content-heavy page.

Using the exported code on a web page

  1. Build or import a model, then check the voxel and facet counts in the status area.
  2. Use Copy for the CSS, or Download Code to save it.
  3. Add the styling to your page and place the model's markup where you want it to appear.
  4. Verify in the browser that the cuboids render in the intended arrangement; if the model looks flat or misaligned, the grid and transform rules are the first place to check.

For a quick trial without touching your own project, Open Codepen loads the work into a pen, and Embed is the option to reach for when the model should appear inside another page rather than be maintained as separate code.

Deciding whether this approach fits

CSS cuboids suit decorative or illustrative models on a page you already control, where the model can share the page's styling and needs no separate 3D library. They are a poorer fit when the model is large or needs real-time interaction beyond what CSS transforms provide — the voxel and facet counters are your guide here, since they scale with the exported code's weight. If you need the model in a dedicated 3D pipeline instead, the VOX export is the more appropriate output.