Домашнее задание
Задача: создайте карточку, которая на
:hover/:focus-within слегка приподнимается и увеличивается (translateY + scale) с плавным transition, а затем добавьте отдельный блок с 3D-наклоном через perspective у родителя и rotateY у самой карточки.1
Разметка
Создайте index.html с карточкой: контейнер .card и внутри заголовок с текстом.
2
Hover-эффект на transform
В styles.css задайте transition: transform 200ms ease, а на :hover — transform: translateY(-6px) scale(1.03). Проверьте, что соседние блоки не сдвигаются.
3
3D-наклон
Оберните карточку в контейнер с perspective: 800px и примените к карточке rotateY(18deg). Поэкспериментируйте со значением perspective и с transform-origin.
4
Проверка в браузере
Откройте страницу, наведите курсор, убедитесь в плавности. В DevTools (F12) убедитесь, что анимируется именно transform, а не top/left.