Advertisement
  1. Web Design
  2. CSS
Webdesign

How to Create an Isometric Layout With CSS 3D Transforms

by
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.

the Elements homepage
The Elements homepage

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. 

Some objects viewed using the isometric projection. Image by Wikipedia.

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.

The three axis x, y, and z in 3D plane. Image by W3C.

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.

Shadow Styles

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:

Notice the rounded corner and the shadow spread below the image.

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.

The hover-state item is levitated higher than the rest and tipped slightly

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

Further Resources

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.