https://lendex.ru/js/fishCards.js

1document.addEventListener('DOMContentLoaded', function() {
2    // Параметры анимации
3    const sensitivity = 0.15; // Чувствительность к движению мыши (0.1-0.3)
4    const maxRotation = 10;   // Максимальный угол поворота (градусы)
5    const scaleFactor = 1.15; // Коэффициент увеличения
6
7    document.querySelectorAll('.fish-img-3d').forEach(img => {
8        let animationFrame;
9        let targetTransform = '';
10        
11        // Инициализация перспективы
12        img.parentElement.style.perspective = '1400px';
13
14        // Плавное обновление трансформаций
15        function updateTransform() {
16            if (!targetTransform) return;
17            img.style.transform = targetTransform;
18            animationFrame = requestAnimationFrame(updateTransform);
19        }
20
21        img.addEventListener('mousemove', (e) => {
22            const rect = img.getBoundingClientRect();
23            const centerX = rect.left + rect.width / 2;
24            const centerY = rect.top + rect.height / 2;
25            
26            // Расчет смещения от центра
27            const deltaX = (e.clientX - centerX) * sensitivity;
28            const deltaY = (e.clientY - centerY) * sensitivity;
29
30            // Ограничение углов
31            const rotateY = Math.min(maxRotation, Math.max(-maxRotation, deltaX));
32            const rotateX = Math.min(maxRotation, Math.max(-maxRotation, -deltaY));
33
34            // Формирование трансформации
35            targetTransform = `
36                rotateX(${rotateX}deg)
37                rotateY(${rotateY}deg)
38                scale(${scaleFactor})
39                translateZ(30px)
40            `;
41
42            // Запуск анимации
43            if (!animationFrame) {
44                animationFrame = requestAnimationFrame(updateTransform);
45            }
46        });
47
48        img.addEventListener('mouseleave', () => {
49            // Плавный возврат в исходное состояние
50            targetTransform = 'rotateX(0) rotateY(0) scale(1) translateZ(0)';
51            setTimeout(() => {
52                cancelAnimationFrame(animationFrame);
53                animationFrame = null;
54                img.style.transform = 'none';
55            }, 500);
56        });
57    });
58});