Для плавного поворота задайте иконке transition: transform 200ms и меняйте transform: rotate(180deg) при hover кнопки.
Есть кнопка, внутри неё иконка. При наведении на кнопку нужно плавно повернуть иконку на 180 градусов за 200 мс. Какие CSS свойства для этого потребуются?
Для плавного поворота задайте иконке 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.