3D Tilt Effect on Hover Using Vanilla JS

This Vanilla JS code snippet helps you to create 3D tilt effect on the hover event. It adjusts angles and perspectives based on mouse movements, giving images a dynamic appearance. Helpful for adding interactive visual effects to images without external libraries.

You can use this code on websites featuring image galleries or product showcases. It adds interactivity, making images stand out for a more engaging user experience.

How to Create 3S Tilt Effect on Hover Using Vanilla JS

1. First of all, add the <img> tags for the images you want to apply the tilt effect to. Include the data-tilt attribute in each <img> tag. Replace the src attribute with the URL of your own images:

<img data-tilt src="https://source.unsplash.com/500x500?mountains=1" alt="mountains" width="500" height="500">
<img data-tilt src="https://source.unsplash.com/600x400?mountains=2" alt="mountains" width="600" height="400">

2. Ensure your CSS includes the necessary styling for the images and the layout. The following code contains styles for the images and basic layout adjustments. Customize as needed for your project.

*,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}

body {
  display: grid;
  place-items: center;
  gap: 4em;
  min-height: 100vh;
  margin: 0;
  padding: 4em;
  background: #f0f0fa;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 1em;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.25);
  margin: 50px auto;
}

3. Finally, include the following JavaScript code in your project. This code creates a tilt() method that enables the 3D tilt effect on images. Within the tilt() method, you can adjust various options like angle, perspective, scale, and more. Experiment with these to achieve the desired tilt effect.

Element.prototype.tilt = function (options) {

	// ----- config ----- //

	const config = {
		angle:            options?.angle            ?? 10,
		invert:           options?.invert           ?? false,
		perspective:      options?.perspective      ?? 1000,
		reset:            options?.reset            ?? true,
		scale:            options?.scale            ?? 1,
		transformElement: options?.transformElement ? this.querySelector(options.transformElement) : this,
		transitionEasing: options?.transitionEasing ?? 'cubic-bezier(.03, .98, .52, .99)',
		transitionSpeed:  options?.transitionSpeed  ?? 1500,
	};

	let timeout;


	// ----- functions ----- //

	const setTransition = (el, config) => {
		if (typeof config.transitionSpeed === 'number') {
			config.transformElement.style.transition = `transform ${config.transitionSpeed}ms ${config.transitionEasing}`;

			if (timeout !== undefined) clearTimeout(timeout);

			timeout = setTimeout(() => {
				config.transformElement.style.transition = '';
			}, config.transitionSpeed);
		}
	};

	const handleOver = (e, config) => {
		setTransition(this, config);

		if (typeof config.perspective === 'number') {
			this.style.setProperty('--tilt-perspective', `${config.perspective}px`);
		}

		if (typeof config.scale === 'number') {
			this.style.setProperty('--tilt-scale', `${config.scale}`);
		}
	};

	const handleMove = (e, config) => {
		let rect   = this.getBoundingClientRect();
		let x_pos  = Math.ceil(e.clientX - rect.left);
		let y_pos  = Math.ceil(e.clientY - rect.top);
		let w_half = rect.width / 2;
		let h_half = rect.height / 2;
		let x_rot  = config.angle / h_half * (h_half - y_pos);
		let y_rot  = config.angle / w_half * (w_half - x_pos);

		if (typeof config.invert === 'boolean' && config.invert) {
			x_rot *= -1;
			y_rot *= -1;
		}

		this.style.setProperty('--tilt-x', `${x_rot.toFixed(2) * -1}deg`);
		this.style.setProperty('--tilt-y', `${y_rot.toFixed(2)}deg`);
	};

	const handleOut = (e, config) => {
		this.style.setProperty('--tilt-scale', 1);

		if (typeof config.reset === 'boolean' && config.reset) {
			this.style.setProperty('--tilt-x', '0deg');
			this.style.setProperty('--tilt-y', '0deg');
		}

		setTransition(this, config);
	};


	// ----- events ----- //

	this.addEventListener('mouseover', e => handleOver(e, config));
	this.addEventListener('mousemove', e => handleMove(e, config));
	this.addEventListener('mouseout', e => handleOut(e, config));


	// ----- initial styles ----- //

	config.transformElement.style.willChange = 'transform';
	config.transformElement.style.transform = 'perspective(var(--tilt-perspective)) scale(var(--tilt-scale)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))';
};



document.querySelectorAll('[data-tilt]').forEach(el => {
	el.tilt({
		//override defaults:
		//angle: 10,
		//invert: false,
		//perspective: 1000,
		//reset: true,
		//scale: 1,
		//transformElement: '',
		//transitionEasing: 'cubic-bezier(.03, .98, .52, .99)',
		//transitionSpeed: 1500,
	});
});

That’s all! hopefully, you have successfully created a 3D tilt effect on hover using Vanilla JS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.