Эффект наведения курсора на CSS-карточку за считанные минуты: использование CSS Perspective скачать в хорошем качестве

Эффект наведения курсора на CSS-карточку за считанные минуты: использование CSS Perspective

Существует множество отличных 3D-библиотек, которые помогут превратить ваш 2D-сайт в 3D-проект. Но видели ли вы когда-нибудь перспективную анимацию CSS? Это очень мощный и простой способ создания базовой 3D-анимации только с помощью CSS, без использования каких-либо из этих библиотек. В сегодняшнем видео мы воссоздадим карточку профиля в браузере Arc, которая будет иметь 3D-анимацию наклона при наведении курсора. Мы создадим 3D-наклон только с помощью чистого CSS и добавим немного JavaScript, чтобы карточка реагировала на положение курсора. Как и в большинстве видео, мы объединим это, используя Tailwind, TypeScript и React. Давайте приступим! ✨ Станьте профессионалом уже сегодня на https://www.frontend.fyi/pro 💬 Присоединяйтесь к нам в Discord: https://www.frontend.fyi/discord 🔗 Проверьте код и прочтите статью: https://www.frontend.fyi/v/css-3d-per... 👀 Временные метки 00:00 — Вступление 00:45 — Что мы будем создавать 01:15 — Начало разработки — добавление перспективы 03:28 — Экспериментируем с 3D-преобразованием 04:50 — Добавление событий мыши для определения положения курсора 09:10 — Использование положения курсора для преобразования в градусы поворота 12:00 — Задайте значения поворота как переменные CSS и заставьте карту двигаться 13:46 — Добавьте движущийся блик на карту 19:27 — Конечный результат и заключение #css #animations #frontend