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:

tilt-shift effect



    <meta charset="UTF-8">
    <title>3D Tilt</title>
    <link rel="stylesheet" href="style.css">

    <div class="container">
        <div class="card" data-tilt data-tilt-max="10"
            <img src="skull.svg" alt="skull">
    <!-- Scripts -->
    <script src="vanilla-tilt.min.js"></script>



	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: #2E3436FF;
	display: flex;
	align-items: center;
	justify-content: center;

    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);
perspective: 1000px;

How to add Tilt-shift Effect


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 //

<div class="your-element" data-tilt></div>

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>

2.The second way to use javascript to add this tilt-shift effect(Little harder way)

                                   // EXAMPLE //
<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

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.