User:BakiDance/common.js

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)';
});