Isometric and 3D Grids

Some experimental isometric and 3D grids. The idea is to use isometric/3D grids as decorative elements or with some interaction.

From our sponsor: Market smarter with Mailchimp's automated messaging tools.

Today we’d like to share some isometric grid styles with you. The inspiration comes from the Hotchkiss website where an isometric, scrollable grid is shown with some cool hover effects. In our first experiment we created a scrollable grid just like the one seen on that site, with some hover effects that involve random rotations. The second demo shows some ideas for “static” grids that are not scrollable but that serve more kind of a decorative purpose.

For the grid layout we are using Metafizzy’s Masonry, the cascading grid layout library by David DeSandro.

Attention: Some of the techniques we are using are very experimental and won’t work in all browsers. Support for transform-style: preserve-3d is necessary for this demo.


The first demo shows how an isometric grid can be scrolled using the pagescroll.

In the second demo we show some ideas for different static/decorative styles. The grid is used as a background element that allows for some interaction. There are many possibilities and the following serve as inspiration:





Unfortunately, IE does not support transform-style: preserve-3d which breaks nested 3D elements. So this demo won’t work in the versions that don’t support it.

We hope you enjoy this experiment and find it inspiring!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 51

Comments are closed.
  1. Thank you so much! I use it for my trivia game:
    πŸ™‚ I hope you like it.

  2. I can’t implement it, the whole CSS seem not to be compatible with my website.

  3. Hey Aviv,
    I think debugging your site is a must,
    But from looking at the console, you have a few errors,
    One of the is : Uncaught SyntaxError: Unexpected token (

    this could cause the site to misbehave.
    hope this helps.

  4. Really really beautiful, congrats!!. Anyone knows why doens’t work on iphone mobile? Using this platform does not work in any browser. Thanks!!

  5. Hi. This is so beautiful. But there are some problems with Firefox!? I opened the demo site, hover, all fine. But after scrolling the hover doesn’t work everytime. Tested on different devices.

    • Heyyyyy can you please help me with a few details on how I can use it on my website???

      I’m desperate

  6. Can someone please pick my jaw up from the floor, wow! Had a look at your source of inspiration, hotchkiss, which is spectacular.

    They’ve added a clever sorting/filter, ‘order by year’ that makes it easy to digest the content.

    I’m hoping that someone a lot smarter than me can point me in the right direction, on how to use it / add it to your isometric grid too.

  7. Isometric grid-AMAZING!!! I’m new to coding… how can I make menu button work? jump to section? or link to pages?

  8. For those having trouble with getting the 3D effect working, upgrade to the full modernizer version instead of using the custom build. Solved my issues.