3d-image-follow-mouse.js

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const card = document.querySelector('#intro-image-wrapper');
        const motionMatchMedia = window.matchMedia('(prefers-reduced-motion)');
        const buffer = 10;

        function handleHover(e) {
            const { clientX, clientY, currentTarget } = e;
            const { clientWidth, clientHeight, offsetLeft, offsetTop } = currentTarget;

            const horizontalRatio = (clientX - offsetLeft) / clientWidth;
            const verticalRatio = (clientY - offsetTop) / clientHeight;
            const xRotation = (buffer / 2 - horizontalRatio * buffer).toFixed(2);
            const yRotation = (verticalRatio * buffer - buffer / 2).toFixed(2);

            card.style.animation = 'none';
            card.style.transform = `perspective(${clientWidth}px) rotateX(${yRotation}deg) rotateY(${xRotation}deg) scale3d(1, 1, 1)`;
        }

        function resetStyles(e) {
            card.style.transform = `perspective(${e.currentTarget.clientWidth}px) rotateX(0deg) rotateY(0deg)`;
            card.style.animation = 'rotateAnimation 4.5s linear infinite';
        }

        if (!motionMatchMedia.matches) {
            card.addEventListener('mousemove', handleHover);
            card.addEventListener('mouseleave', resetStyles);
        }
    });
</script>