How To Make Interactive 3D Tilt Images For Your Webpage

I recently created a cool front end effect that I thought was worth sharing. I’ll show 2 versions; isometric and non-isometric, both look awesome and no 3D javascript engine is needed so the effect is relatively lightweight and works across most browsers.

To break things down real quick I’ll summarize what's going on here. The effect is created by stacking .png images with transparency on top of each other, adding parallax to the layers, and then putting everything on top of an interactive javascript tilt plane. This provides the illusion of depth and changing perspective between layers giving the set of images a 3-dimensional look.
I’ll start with the non-isometric version since that is the simpler option, the isometric version only requires a few extra steps.
Step #1 : set up the tilt plane
I used vanilla-tilt.js https://github.com/micku7zu/vanilla-tilt.js/
This part is pretty straightforward, just add the packaged .js files to your project and then include the script in your views body. I used Vue for this project but if you are using a different framework or none at all you can simply put this inside your app’s body.
<script type="text/javascript" src="vanilla-tilt.js">VanillaTilt.init(document.querySelector(".your-element"), {
max: 10,
speed: 800
});</script>
Next, we need to add the component to our page
<div class="your-element tile-img" data-tilt data-tilt-scale="1.05"><div>And add some CSS
.your-element{
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
transform-style: preserve-3d;
background-repeat: no-repeat;
background-size: contain;
background-color: #ffffff;
will-change: transform;
}.tile-img {
width: 400px;
height: 400px;
}
We should now have a base layer that tilts when you hover over it with your cursor.
Step #2 : create and add our image layers
For this example, I’ll be using 4 layers but you can use less or more within reason, you will probably start to run into rendering issues at around 7 or 8 layers.
In order to make this all work, we need to add these images as divs to the component.
<div class="your-element tile-img" data-tilt data-tilt-scale="1.05">
<div class="tile-img layer layer-1">
<div class="tile-img layer layer-2">
<div class="tile-img layer layer-3">
<div class="tile-img layer layer-4">
</div>
</div>
</div>
</div>
</div>And we will add some more CSS for the layers:
.layer{
display: block;
position: absolute;
background-repeat: no-repeat;
background-size: contain;
transform-style: preserve-3d;
top: 51%;
left: 50%;
}
.layer-1{
background-image: url("../assets/Images/your-layer-1.png");
width: 100%;
height: 100%;
transform: translateZ(10px) translateX(-50%) translateY(-50%);
}
.layer-2{
background-image: url("../assets/Images/your-layer-2.png");
width: 99%;
height: 99%;
transform: translateZ(20px) translateX(-50%) translateY(-50%);
}
.layer-3{
background-image: url("../assets/Images/your-layer-3.png");
width: 98%;
height: 98%;
transform: translateZ(30px) translateX(-50%) translateY(-50%);
}
.layer-4{
background-image: url("../assets/Images/your-layer-4.png");
width: 97%;
height: 97%;
transform: translateZ(40px) translateX(-50%) translateY(-50%);
}Each layer uses transform: translateZ(…); to add the parallax depth.
Notice how the width and height for each layer gets slightly smaller? this is because as we bring layers forward to add depth they appear slightly larger, you may need to play around with these values if you decide to add more layers, change the depths, or use isometric image layers.
Step 3 : create our content
This part is a little bit harder for me to cover since you will probably want to do your own thing when it comes to image content but I’ll show you how my approach looked when creating the layers.
I used Figma but there are plenty of other software options, Illustrator, Sketch, XD, Lunacy, and Photoshop all work great.
I started with a pre-sized background canvas to build on top of:

Now we can start building our design, try to think about it in terms of layers while creating it but don’t let that distract you too much.

We have to separate the layers now before we add them to our web page.
I just selected the background canvas along with the layer I wanted (hold shift to select multiple in most programs) and then I copy+pasted and grouped the separated layers off to the side like this

Then I reduced the background transparency of each group to 0%

Now you can save all of the layers as .png images and add them to your project.

Result :

Now let’s Make the Isometric Version
Squares are cool and all… but there's a lot more that we can do with this effect. The coolest thing I found was putting the content layers on an isometric plane and adding box shadows to them giving an awesome 3D effect.
For this one I am going to use some UI elements and a logo to top them off.

Now to create the isometric effect I am going to rotate the image layers by 45 degrees each and then re-group them so that it is their new upright position.

And then compress the height to 57.73% to get set it on an isometric plane


Now repeat this process for all your layers and arrange them on your canvas.

You can add box shadows to really up the 3D effect.

Now separate, save the layers, and add them to your project.
Just follow the steps from the first example for this part.

Result:

The proportions ended up being a tiny bit off with this one but I included better examples you can look at. Getting these proportions correct with isometric images will be specific to the layers every time, it just takes some trial and error testing, messing around with the height/width of each layer.
(make sure to keep the height and width % the same to maintain the correct aspect ratio)
Once you spend some time working out the details you can achieve some really awesome looking results.
Heres an example of one I used in my portfolio.

