ycliper

Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
Скачать

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

Автор: Topchiy Dev

Загружено: 2026-03-04

Просмотров: 30

Описание: В этом видео мы создадим эффектную карточку с 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

Не удается загрузить Youtube-плеер. Проверьте блокировку Youtube в вашей сети.
Повторяем попытку...
Как сделать 3D TILT эффект карточки на JavaScript и CSS

Поделиться в:

Доступные форматы для скачивания:

Скачать видео

  • Информация по загрузке:

Скачать аудио

Похожие видео

MacBook Neo за $599 — дешевле не бывает!

MacBook Neo за $599 — дешевле не бывает!

CSS field-sizing: content | Автоматический размер Input и Textarea без JavaScript | Полный разбор

CSS field-sizing: content | Автоматический размер Input и Textarea без JavaScript | Полный разбор

Космический фон на JavaScript: создаем эффект звездного неба | Space Background Vanilla JavaScript

Космический фон на JavaScript: создаем эффект звездного неба | Space Background Vanilla JavaScript

Что НА САМОМ ДЕЛЕ происходит, когда нажимаешь

Что НА САМОМ ДЕЛЕ происходит, когда нажимаешь "ПРИНЯТЬ ВСЕ КУКИ"?

«Самолёты не должны уметь летать, и никто толком не знает почему.»

«Самолёты не должны уметь летать, и никто толком не знает почему.»

Qwen3-coder-next -- НОВЫЙ ТОП ИИ ЛОКАЛЬНО, БЕСПЛАТНО И БЕЗЛИМИТНО! CLI, сравнение кодинг агентов

Qwen3-coder-next -- НОВЫЙ ТОП ИИ ЛОКАЛЬНО, БЕСПЛАТНО И БЕЗЛИМИТНО! CLI, сравнение кодинг агентов

Как работать с формами в React | Гайд на React Hook Form + Zod

Как работать с формами в React | Гайд на React Hook Form + Zod

Как добавить Favicon на сайт | Иконка сайта (пошаговый урок)

Как добавить Favicon на сайт | Иконка сайта (пошаговый урок)

ЛУЧШИЕ ДИСТРИБУТИВЫ ДЛЯ ЭТИЧНОГО ХАКИНГА | ЧТО ВЫБРАТЬ В 2026? | Kali • Parrot • BlackArch

ЛУЧШИЕ ДИСТРИБУТИВЫ ДЛЯ ЭТИЧНОГО ХАКИНГА | ЧТО ВЫБРАТЬ В 2026? | Kali • Parrot • BlackArch

Савватеев разоблачает фокусы Земскова

Савватеев разоблачает фокусы Земскова

Мир меняется прямо сейчас: почему США теряют власть?

Мир меняется прямо сейчас: почему США теряют власть?

Как хранить и передавать фото, чтобы НИКОГДА их не потерять

Как хранить и передавать фото, чтобы НИКОГДА их не потерять

GLM-5 УНИЧТОЖИЛА DeepSeek! Бесплатная нейросеть БЕЗ ограничений. Полный тест 2026

GLM-5 УНИЧТОЖИЛА DeepSeek! Бесплатная нейросеть БЕЗ ограничений. Полный тест 2026

Как Ubuntu Предала Linux - Вся Правда о Взлёте и Падении Canonical

Как Ubuntu Предала Linux - Вся Правда о Взлёте и Падении Canonical

РАЗБОР ЗАДАЧЕК ИЗ КНИГИ ЗЕМСКОВА!

РАЗБОР ЗАДАЧЕК ИЗ КНИГИ ЗЕМСКОВА!

Как я делаю ДЛИННЫЕ видео в GROK за 0₽ (ГАЙД 2026) + Google Gemini и Google Studio

Как я делаю ДЛИННЫЕ видео в GROK за 0₽ (ГАЙД 2026) + Google Gemini и Google Studio

Так из чего же состоят электроны? Самые последние данные

Так из чего же состоят электроны? Самые последние данные

Закон Джоуля-Ленца

Закон Джоуля-Ленца

Фильм Алексея Семихатова «ГРАВИТАЦИЯ»

Фильм Алексея Семихатова «ГРАВИТАЦИЯ»

Я ВЫШЕЛ ИЗ ИГРЫ И ВЫБРАЛ СВОБОДУ!

Я ВЫШЕЛ ИЗ ИГРЫ И ВЫБРАЛ СВОБОДУ!

© 2025 ycliper. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]