Есть кнопка, внутри неё иконка. При наведении на кнопку нужно плавно повернуть иконку на 180 градусов за 200 мс. Какие CSS свойства для этого потребуются?

Для плавного поворота задайте иконке transition: transform 200ms и меняйте transform: rotate(180deg) при hover кнопки.

Короткий ответ

Что ответить на собеседовании

Для плавного поворота задайте иконке transition: transform 200ms и меняйте transform: rotate(180deg) при hover кнопки.

Подробный разбор

Ответ с пояснениями

Для плавного поворота задайте иконке transition: transform 200ms и меняйте transform: rotate(180deg) при hover кнопки.

Например: .icon { display: inline-block; transition: transform 200ms ease; } .button:hover .icon, .button:focus-visible .icon { transform: rotate(180deg); }. transition размещают в базовом состоянии, чтобы обратный поворот тоже был плавным. Учитывайте prefers-reduced-motion.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее