Как сделать 3D TILT эффект карточки на JavaScript и CSS скачать в хорошем качестве

Как сделать 3D TILT эффект карточки на JavaScript и CSS

В этом видео мы создадим эффектную карточку с 3D наклоном (Tilt Effect), которая реагирует на движение курсора мыши. Мы реализуем этот проект без сторонних библиотек, используя только современный CSS и чистый JavaScript. Вы узнаете, как работать с CSS перспективой (perspective), вычислять координаты курсора относительно центра элемента и плавно анимировать трансформацию. Такой эффект отлично подходит для игровых сайтов, карточек товаров или портфолио, добавляя интерфейсу интерактивности и объема. 🕒 Тайм-коды: 00:00:00 - Демонстрация 3D Tilt эффекта: наклон карточки при наведении 00:00:35 - Написание HTML разметки: контейнер, изображение и текстовый контент 00:02:50 - Настройка CSS переменных и базовых стилей страницы 00:04:55 - Секрет 3D эффекта: настройка свойства perspective и глубины искажения 00:06:45 - Стилизация карточки: тени, скругления и оптимизация трансформаций 00:08:30 - Оформление контента: работа с типографикой и изображениями 00:10:05 - JavaScript: поиск элементов и настройка параметров (угол и скорость) 00:12:00 - Логика MouseMove: вычисление позиции курсора внутри карточки 00:14:15 - Математика наклона: расчет градусов поворота по осям X и Y 00:17:10 - Применение трансформаций и масштабирования (Scale) через JS 00:18:20 - Плавный возврат карточки в исходное состояние (MouseLeave) 00:20:25 - Убираем задержку при входе мыши для идеального отклика 00:21:45 - Тестирование и изменение параметров наклона в настройках 💡 Технические приемы из видео: ✅ perspective - создает точку обзора для 3D пространства. ✅ transform-style: preserve-3d - позволяет дочерним элементам сохранять объем. ✅ getBoundingClientRect() - метод для точного определения позиции карточки на экране. ✅ will-change: transform - подсказка браузеру для плавной работы анимации. Полезные материалы: 👉 Flexbox в CSS: Пошаговый курс:   / 1320002   👉 Frontend: лучшие ресурсы:   / 1752178   👉 Membership on Patreon:   / membership   👉 Весь плейлист «CSS с нуля для начинающих»:    • CSS уроки для начинающих с нуля: Полный курс   👉 Весь плейлист «HTML с нуля для начинающих»:    • HTML уроки для начинающих с нуля: Полный курс   Станьте патроном на Patreon и получите доступ к закрытым материалам, бонусным видео и архивам проектов: 👉   / topchiydev   Подписывайтесь на мой Telegram, где я делюсь фишками веб-разработки и эксклюзивными материалами: 👉 https://t.me/TopchiyDev Если вы нашли это видео полезным - ставьте лайк 👍, подписывайтесь на канал и жмите на колокольчик 🔔. Ваши комментарии и вопросы очень важны для меня - пишите, буду рад помочь! 😀 Спасибо за просмотр и до встречи в новых видео! #JavaScript #CSS #3DTilt #Frontend #WebDesign #Верстка #VanillaJS #TopchiyDev #ВебАнимация #Tutorial