Как двигать картинку в html

Для движения изображения в HTML можно использовать свойство CSS "position". Например, чтобы переместить изображение вправо на 20 пикселей, можно использовать следующий код:

<img src="image.jpg" style="position: relative; left: 20px;" />

В данном примере мы задаем свойство "position" со значением "relative", что позволяет перемещать элемент относительно его начального положения. Затем мы используем свойство "left" со значением "20px", чтобы переместить изображение вправо на 20 пикселей.

Также можно использовать свойство "top" для перемещения изображения вверх или "bottom" для перемещения вниз.

Для анимации рекомендуется использовать свойство transform со значениями translate. Такой подход является более оптимизированным и затрачивает меньше ресурсов, а сама анимация будет выглядеть более плавной.

Например, здесь изображения логотипа будет смещено вправо на величину 100px.

<style>
  .logo {
    transform: translateX(100px);
  }
</style>

рро

🤑🤑🤑🤑Спс

Картинку на странице двигают через CSS. Чтобы поставить её в нужное место, чаще всего хватает margin, выравнивания текста или флексбокса. Сдвинуть картинку относительно её места можно через position: relative или transform.

Поставить картинку по центру, слева или справа

По центру:

img {
  display: block;
  margin: 0 auto;
}

Справа:

img {
  display: block;
  margin-left: auto;
}

Или выровняйте содержимое родителя:

.gallery {
  display: flex;
  justify-content: flex-end;   /* вправо; center — по центру */
  gap: 16px;
}

Картинка с обтеканием текстом

.article img {
  float: right;
  margin: 0 0 16px 16px;
}

Текст обтечёт картинку слева.

Сдвинуть на несколько пикселей

img {
  position: relative;
  left: 20px;   /* вправо на 20px */
  top: -10px;   /* вверх на 10px */
}

То же через transform, он не влияет на соседние элементы:

img {
  transform: translate(20px, -10px);
}

Поставить картинку в точное место блока

.card {
  position: relative;
}

.card .badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

Картинка .badge встанет в правый верхний угол блока .card.

Анимация движения

.moving {
  animation: slide 3s ease-in-out infinite alternate;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

Картинка будет ездить вправо и обратно.

Перетаскивание мышью

Атрибут draggable у картинок отвечает за перетаскивание в другое место, например в поле загрузки файла. Чтобы двигать картинку по странице, нужен JavaScript:

<img id="pic" src="cat.png" alt="Кот" style="position: absolute; left: 0; top: 0;">
<script>
  const pic = document.getElementById("pic");
  pic.addEventListener("pointerdown", (e) => {
    const dx = e.clientX - pic.offsetLeft;
    const dy = e.clientY - pic.offsetTop;
    const move = (ev) => {
      pic.style.left = ev.clientX - dx + "px";
      pic.style.top = ev.clientY - dy + "px";
    };
    document.addEventListener("pointermove", move);
    document.addEventListener("pointerup", () => {
      document.removeEventListener("pointermove", move);
    }, { once: true });
    e.preventDefault();
  });
</script>

Позиционирование, флексбокс и анимации разбирают на курсе «Профессиональная верстка», работу с DOM — в бесплатном курсе «Основы JavaScript».