Greenshift WordPress
Free Download

Stacked Isometric effect

How to import code

If link is going to Gist.Github, then visit it, click on Raw button and copy code

Then, simply paste it in your editor. In some cases, if you see code instead of blocks, you need to switch to code view (top right 3dots and select to use code view), paste code in code view and switch back to visual view.

If link is going to library, then you can import and find this element in Experimental/Fancy section of library

G

Idea of this effect is using specific settings inside Css transformation in 3d space. And it’s not so hard as you think. You just need to set rotation in all 3 axis

Then, to put them all under one another, I placed each layer inside the container and set different Positions. Technically you can drop anything inside each layer.

On top of this, I put Animation container and applied Stagger animations

«
»