CSS-свойство transform в JavaScript

Свойство style.transform меняет отображение элемента: его можно сдвинуть, увеличить или повернуть. При этом место элемента в потоке документа не меняется.

• Что меняет transform
• Сдвиг элемента
• Масштабирование
• Поворот элемента
• Несколько преобразований
• Итого

Что меняет transform

JavaScript записывает преобразование как inline-стиль выбранного элемента. Оно меняет его вид, но не положение соседних элементов. Поэтому сдвинутая карточка может визуально наложиться на другой элемент, а место, которое она занимала до сдвига, останется в раскладке.

Сдвиг элемента

<div class="card"></div>

.card {
  width: 120px;
  height: 80px;
  background-color: #3182ce;
}

const card = document.querySelector('.card');

card.style.transform = 'translate(20px, -8px)';

Первое значение сдвигает элемент по горизонтали, второе - по вертикали. Отрицательное значение сдвигает влево или вверх.

Масштабирование

card.style.transform = 'scale(1.1)';

Значение 1 означает исходный размер. scale(1.1) визуально увеличит элемент на 10%.

Поворот элемента

card.style.transform = 'rotate(15deg)';

rotate() принимает угол. Положительное значение поворачивает элемент по часовой стрелке, а отрицательное - против часовой.

Несколько преобразований

Несколько функций записывают в одной строке.

card.style.transform = 'translateY(-8px) scale(1.02)';

Порядок функций важен: другая последовательность может дать другой результат.

Новое значение style.transform заменяет предыдущее. Если нужны и сдвиг, и масштабирование, укажите их в одной строке.

Чтобы убрать inline-преобразование, присвойте свойству пустую строку:

card.style.transform = '';

После этого для элемента снова применится значение transform из CSS, если оно там задано.

Итого

transform подходит для визуального перемещения, масштабирования и поворота элементов. Он не меняет место элемента в раскладке, а несколько преобразований нужно указывать одним значением. Чтобы изменить расположение соседних элементов, используйте CSS-свойства, которые влияют на раскладку.