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.

IsometricGrids_800x600

View demo Download source

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.

IsometricGrids_0

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:

IsometricGrids_1

IsometricGrids_3

IsometricGrids_4

IsometricGrids_5

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!

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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 49

  1. 1

    Thanks too!, I used it for http://ingleseoi.es/ielts/. It works in chrome, mozilla, edge,.. but it doesn’t work 3D in explorer, so I made an alert in explorer recommending other browsers. It’s responsive in mobile but redirecting transforms:

    if(screen.width>500)
    (function() {
    function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max – min + 1)) + min;
    }

    [].slice.call(document.querySelectorAll(‘.isolayer’)).forEach(function(el) {
    new IsoGrid(el, {
    type : ‘scrollable’,
    transform : ‘translateX(-15vw) translateY(200px) rotateX(45deg) rotateZ(45deg)’,
    stackItemsAnimation : {
    properties : function(pos) {
    return {
    rotateX: (pos+1) * -32.5,
    };
    },
    options : function(pos, itemstotal) {
    return {
    type: dynamics.bezier,
    duration: 500,
    points: [{“x”:0,”y”:0,”cp”:[{“x”:0.2,”y”:1}]},{“x”:1,”y”:1,”cp”:[{“x”:0.3,”y”:1}]}],
    delay: (itemstotal-pos-1)*40
    };
    }
    },
    onGridLoaded : function() {
    classie.add(document.body, ‘grid-loaded’);
    }
    });
    });
    })();
    else
    (function() {
    function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max – min + 1)) + min;
    }

    [].slice.call(document.querySelectorAll(‘.isolayer’)).forEach(function(el) {
    new IsoGrid(el, {
    type : ‘scrollable’,
    transform : ‘translateX(30px) translateY(400px)’,
    onGridLoaded : function() {
    classie.add(document.body, ‘grid-loaded’);
    }
    });
    });
    })();

Follow this discussion

Leave a Comment