fig 1. Dom elements are positioned within the environment according to the vertical and horizontal offsets of the grids isometric perspective View example
Grid cells can be styled using css sprites.
fig 2. Grid cells styled to look like a two-dimensional plain in perspective. View example
A grid-item class allows each cell of the grid to have a type, and for type-specific dom elements to be rendered into the grid cells dom element.
fig 3. A grid representing a landscape with a few tree items View example
A demonstration of the same basic principle applied to hexagonal tiles in an axonometric environment. This is accomplished by adding a z-axis and calculating the mouse-hover over the hex grid based on the x,y,z rows.
fig 4. A trimetric projection of a hexagonal grid with precise tracking of the mouse position within the hex coordinate space. View example
View Adam Portilla's portfolio website