Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

# How to Create an Isometric Layout With CSS 3D Transforms

Difficulty:IntermediateLength:MediumLanguages:

We draw inspiration for this tutorial from Envato’s latest initiative; Envato Elements. The homepage of Elements features a range of creative products (FontsIconsGraphic Templates and so on) displaying them together on a neat isometric grid layout.

We are going to recreate this isometric landscape using CSS 3D Transforms.

## Isometric Projection

“Isometric projection” is a method (commonly used in engineering and games in the 80s and 90s where 3D processing power was very limited) for presenting a design in apparent three dimensions.

These are not three dimensions as we experience them in real life–the plane on which they’re displayed is lacking perspective.

### The Z-Axis

For many years, the web has been a two-dimensional environment and we are accustomed to positioning elements along two axes or directions: the x-axis (horizontal) and y-axis (vertical).

Note: the y-axis on the web is reversed contrary to the original Cartesian coordinate principle, since the web is read top to bottom.

The third axis, namely the z-axis, is required to project a 3D view. This axis represents depth, and the movement direction of an object along the z-axis is relative to our point of view; it may move top-bottom, up-down, or near-far.

These three axes can be applied to the CSS Transform function to create a 3D projection. In the following demo, we use the `rotateX()``rotateY()`, and `rotateZ()` function to create an isometric projection of a rectangle:

Now that we have the basic principle that underlies an isometric projection, we can put it into practice. And we begin with the HTML.

## HTML

Similarly to the Envato Elements homepage, we have a grid layout. Our grid comprises a row with nine columns. Each column contains a product image, the link pointing to the product page, and as you can see below, a `span` element which we will use to model the image shadow.

## CSS

We begin with the styles that reset default styles of some elements.

These styles set all elements with `box-sizing`, which will make determining the element total size more easily predictable. We also set the image rendering to `block` to remove that little whitespace at the bottom of the image. And finally we remove the `figure` element margin that wraps the image.

Then we proceed with the row and the columns styles.

The above styles set the row to `display: flex`, set the transform styles to 3D so the browsers will adhere to the z-axis transformation correctly, rotate the row to create an isometric view, and lastly divide the columns within the row into half.

Next, we have to add the styles that position the child elements of the row and column in 3D view. This following style is essential. The `transform-style: preserve-3d` have to be declared on each element wrapped under the `.row`, so they will be correctly rendered in 3D space — specifically, in Firefox — and the Z-axis will take into effect.

Next, we add styles to the `.cover` class, which we’ve added to the product link anchor tag, and the `span` element (soon to be the shadow).

Having this style added, the product link as well as the `span` element now stretch all the way across the container. We are also able to change the element stack position later on.

### Image Styles

The following styles govern the image wrapper element position, padding, and some 3D stuff. The `backface-visibility` is set so we won’t see through the stack underneath the translated or rotated element, and won’t see the inverted face of the image.

We apply transition to the image, and move through the z-axis to make it "levitate” above"the shadow by  `15px`. Similarly, we also add some 3D stuff: `backface-visibility` and `transform-style`, so it will render the 3D view properly.

The following gives us our shadow styles. The shadow spread should be narrow and the shadow shade darker since the image, at this point, is closer (by `15px`) to the “floor” where the shadow is reflected.

We have made quite some progress:

## Hover Effect

The hover effect will make each image thumbnail more engaging.

In the hover state, as shown in the above code snippet, we will first move the element stack up higher, so the image (and the link) will appear above the rest of the items within the grid.

We will also lift the image slightly; moving it away from the “floor” and a bit closer to the “light” source. This being said the shadow should lose some clarity, so we decrease the shadow opacity.

## Wrapping Up

In this tutorial, we have used 3D transforms in CSS to build a replica of Envato Elements’ isometric grid. We also learned how to add realism in terms of shadows and light sources. Take a look at the demo, grab the source files, and let us know what you do with them!

3D Transforms are a powerful CSS utility. But don’t consider them merely a gimmick or a toy for adding a fancy layer to the web. If applied thoughtfully, 3D elements can also solve some notorious design problems