|
Tags: Blanking Manual revert |
| Line 1: |
Line 1: |
| 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)';
| |
| });
| |
