From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
The first demo shows how an isometric grid can be scrolled using the pagescroll.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
Insane…as usual.
Nice 3D Effect but how can i add a popup in the grid?
The world would be so much boring without you Mary Lou!
Thank you so much, I can not stop saying it.
That is sooo true! :)
Awesome! Stealing…
Very nicely done. Unusual to see something equal parts visually stunning AND actually useful. Thanks.
Awesome!+1
I can’t use Chinese in your website.It is so sad…
Awesome as usual.
wowo
just when i think you’ve reached the limit of web designing … you just surprise me everytime … kudos … fantastic this:)
Really AWSM! … as usual.
This is amazing! Thank you for this masterpiece
Niiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiice! Thank you!
I think you’re genius! really awesome work!!!!!! In my life first to leave a comment!
Very good π Love it so much
I am not sure I am even worthy to read this. Amazing!
I’d love to see the click transform into a modal instead of being a link. This is stupid cool!
How can i find more websites like u ? ^_^
This is really perfect! Thank you very much for this great share! But unfortunately I don’t get the same great 3D-effect on my page (using Chrome and Firefox). Any help??? π
Really beautiful. Can you give me a tip: what could you put in transform:” (Isogrid.prototype.options, main.js). CSS3 transform properties don’t work. Thanks for the help.
Ooops I found, thanks
How did you get the 3D effects to work?
Insane…
Thank you so much! I use it for my trivia game: Cinetrivia.com
π I hope you like it.
Very cool.
I can’t implement it, the whole CSS seem not to be compatible with my website.
can someone help me? site : http://colorvision.pe.hu/
my site is in hebrew so don’t look on the text…
After using this resourceful site for so many years, this is one of those things where you’re going to need to learn the languages and debug on your own π
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 :
colorvision.pe.hu/:401 Uncaught SyntaxError: Unexpected token (
this could cause the site to misbehave.
hope this helps.
omega good job!
As per usual, my jaw ? floor.
Really really beautiful, congrats!!. Anyone knows why doens’t work on iphone mobile? Using this platform does not work in any browser. Thanks!!
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.
Great engineering script…!!!
This one is very neat, love your work, Mary Lou.
Great resource, I’ve used it in this interactive visualization: http://cartesiani.it/best-selling-albums/
Heyyyyy can you please help me with a few details on how I can use it on my website???
I’m desperate
Hey Marco.. how do you fixed the “Firefbox Bug”? Your site’s working perfect
This is amazing. If only the first one was responsive π
Pretty amazing technique. Stunning design.
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.
nice post!
Isometric grid-AMAZING!!! I’m new to coding… how can I make menu button work? jump to section? or link to pages?
Original I believe:
http://www.hotchkiss.co.jp/
Yes, just as mentioned in the article π
Amazing!
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.
so cool , thank you so much!
Thanks
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’);
}
});
});
})();
So inspirational! Absolutely love your work, amazing creativity!