From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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.
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!