В CSS анимировать картинки можно с помощью свойства transform. Transform позволяет изменять начальное положение элемента, его размер и поворот. Вот пример, как сделать анимацию картинки на CSS:
HTML:
<img src="картинка.jpg" alt="Картинка">CSS:
img {
transition: transform 0.5s ease;
}
img:hover {
transform: scale(1.2) rotate(10deg);
}Здесь мы задаем свойство transition с длительностью анимации в 0.5 секунды и типом анимации ease. Это будет применено к элементу img.
Затем мы устанавливаем преобразование transform для элемента img, который будет применяться при наведении мыши на него. Мы устанавливаем значение scale (масштаб) 1.2, что увеличит размер картинки на 20%, и значение rotate (поворот) 10deg, что повернет картинку на 10 градусов.
Таким образом, при наведении мыши на картинку, она будет медленно увеличиваться в размере и поворачиваться на 10 градусов вправо.
Transform позволяет создавать различные эффекты, такие как переворот, прокрутка, смещение, масштабирование и многое другое. Более сложные анимации можно создавать с помощью свойств transition и animation.
