Как сделать анимацию картинки в css

В 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.