3D Tilt Parallax Effect with Mouse Movement

Learn how to create the 3D tilt parallax effect while moving a mouse cursor. Developed using html, css, vanilla-tilt.js and JavaScript. Demo and download available.

Include Dependency

<script src='https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js'></script>

CSS Code

body {   background: #2b5876;   background: linear-gradient(to right, #4e4376, #2b5876); }  .o-main {   align-items: center;   display: flex;   flex-direction: column;   height: 100vh;   justify-content: center;   width: 100vw; }  .c-tilt {   align-items: center;   display: flex;   flex-direction: column;   height: 100vh;   justify-content: center;   position: relative;   -webkit-transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);           transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);   -webkit-transform-style: preserve-3d;           transform-style: preserve-3d;   width: 100vw;   will-change: transform; }  .c-ryanyu {   background-color: transparent;   display: block;   font-family: "Kalam", cursive;   height: 26.25rem;   margin: 0 auto;   position: relative;   text-align: center;   -webkit-transform: translateZ(20px);           transform: translateZ(20px);   width: 26.25rem; } .c-ryanyu img {   background-color: white;   border: 0.625rem solid #fa9600;   border-radius: 50%;   height: 25rem;   -o-object-fit: contain;      object-fit: contain;   width: 25rem; }  .c-ryanyu-name-shadow {   color: white;   font-size: 150px;   position: absolute;   top: 292px;   -webkit-transform: translateZ(70px);           transform: translateZ(70px); }  .c-ryanyu-name {   color: #404040;   font-size: 150px;   position: absolute;   top: 290px;   -webkit-transform: translateZ(80px);           transform: translateZ(80px); }  .c-fe30 {   -webkit-animation: fe30-anime 1s ease-in-out 4s forwards;           animation: fe30-anime 1s ease-in-out 4s forwards;   color: #fa9600;   font-size: 1.5rem;   margin-top: 3.125rem;   opacity: 0;   text-align: center;   -webkit-transform: translateZ(30px);           transform: translateZ(30px); } .c-fe30 a {   color: white; } .c-fe30 a:hover {   text-decoration: none; }  @-webkit-keyframes fe30-anime {   0% {     opacity: 0;   }   100% {     opacity: 1;   } }  @keyframes fe30-anime {   0% {     opacity: 0;   }   100% {     opacity: 1;   } }

HTML Snippet

<div class="c-tilt">   <a class="c-ryanyu" target="_blank">     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/ryan-logo.svg" alt="Ryan Yu" />   </a>   <div class="c-ryanyu-name-shadow">Ryan Yu</div>   <div class="c-ryanyu-name">Ryan Yu</div> </div>

JavaScript

VanillaTilt.init(document.querySelector('.c-tilt'), {   max: 25,   perspective: 700,   speed: 400 });

Preview