User:BakiDance/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

const container = document.querySelector('.tilt-container');
const image = container.querySelector('.tilt-container img');

container.addEventListener('mousemove', (e) => {
  const rect = container.getBoundingClientRect();
  const x = e.clientX - rect.left; // mouse X relative to container
  const y = e.clientY - rect.top;  // mouse Y relative to container
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;

  const rotateX = ((y - centerY) / centerY) * 10; // max 10deg tilt
  const rotateY = ((x - centerX) / centerX) * 10; // max 10deg tilt

  image.classList.add('hovered');
  image.style.transform = `rotateX(${-rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`;
});

container.addEventListener('mouseleave', () => {
  image.classList.remove('hovered');
  image.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)';
});