Fork me on GitHub

jQuery Hover3d

jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect.

The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value

Demo #1 Awesome tilt effect

Simple hover effect for your project

Demo #2: AppleTv Icon

By enabling shine option, you can create appleTV icon like effect. Be creating multiple layer for creating depth effect

$(".movie").hover3d({
	selector: ".movie__card",
	shine: true,
	sensitivity: 20,
});