Tiltify.js
<script
src=
"Tiltify.js"></script>
Tiltify is a lightweight JavaScript library that adds a 3D tilt effect to HTML elements based on mouse or touch input.It's easy to customize tilting with parallax effects as it uses modern JS events & CSS3 transforms.
let
tiltify
=
new
Tiltify(
$$( ".myElements" ),
max: 75,
perspective: 1000,
speed: 300
)}
$$( ".myElements" ),
max: 75,
perspective: 1000,
speed: 300
)}
To use Tiltify, simply include the Tiltify script in your HTML file and create a new instance with the selector for the elements you want to tilt and any custom options. You can also destroy the Tiltify instance when it's no longer needed with the destroy() method.
tiltify.
destroy()
For adding 3d parallax effect in an element add transform-style:preserve-3d; to the tilting element & add translateZ(25px) to the childrens of the tilting elememt.
.tiltingParent
{
transform-style: preserve-3d;
transform: perspective(1000px);
}
.tiltingChildrens {
transform: translateZ(25px);
}
transform-style: preserve-3d;
transform: perspective(1000px);
}
.tiltingChildrens {
transform: translateZ(25px);
}