
Table of Contents
Quick Introduction on 3D Tilt-Shift Effect
Today when I was scrolling my twitter feed there I saw a javascript library named Tilt.js. So I thought let’s visit their site to check what really it does.
When I reached on their site they showcase some cool tilt effects examples using their library. So I thought let’s recreate tilt-shift effect by myself.
And the best part of this library is that is works without JQuery. Although they have JQuery version also.
Here’s what we are creating:

HTML
<html>
<head>
<meta charset="UTF-8">
<title>3D Tilt</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card" data-tilt data-tilt-max="10"
data-tilt-scale="1.1">
<img src="skull.svg" alt="skull">
</div>
</div>
<!-- Scripts -->
<script src="vanilla-tilt.min.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #2E3436FF;
display: flex;
align-items: center;
justify-content: center;
}
.card{
background-color: #FCE94FFF;
width: 300px;
height: 350px;
opacity: 0.9;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d ;
}
.card img{
width: 200px;
transform: translateZ(30px);
}
.container{
perspective: 1000px;
}
How to add Tilt-shift Effect
Installation
You can either download the library from their site and attach in your folder or you can install it through npm by running this command:
npm install vanilla-tilt
Ways of Using Tilt.js Library
If you visit their site they have shown two ways of adding the tilt-shift effect.
1.The first way is through adding the data-tilt attribute to your parent element(easy way).
// EXAMPLE //
<body>
<div class="your-element" data-tilt></div>
<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>
2.The second way to use javascript to add this tilt-shift effect(Little harder way)
// EXAMPLE //
<body>
<div class="your-element"></div>
<script type="text/javascript" src="vanilla-tilt.js"></script>
<script type="text/javascript">
VanillaTilt.init(document.querySelector(".your-element"), {
max: 25,
speed: 400
});
//It also supports NodeList
VanillaTilt.init(document.querySelectorAll(".your-element"));
</script>
</body>
Different Properties you can use
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false // if it should have a "glare" effect
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
For more properties: visit
Thanks for reading my article on 3D Tilt-Shift Effect. If you liked it share with others and also check out other articles on: Single Price Card Design: Using Flexbox or 4 Best Ways to Host website for Free or Modern coming soon page.