CSS-свойство transform через style.transform в JavaScript

Свойство style.transform даёт доступ к inline-значению CSS-свойства transform. Через него JavaScript записывает преобразование прямо в атрибут style элемента.

• Задание inline-значения
• Перезапись значения
• Сброс inline-преобразования
• style.transform и CSS-правила
• Итого

Задание inline-значения

<div class="card">Карточка</div>

.card {
  width: 160px;
  padding: 16px;
  color: #fff;
  background-color: #3182ce;
}

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

card.style.transform = 'translateX(24px)';

Значение передают строкой в CSS-синтаксисе. После присваивания браузер запишет transform: translateX(24px) в inline-стили карточки.

Перезапись значения

Новое присваивание полностью заменяет предыдущее inline-значение.

card.style.transform = 'translateX(24px)';
card.style.transform = 'scale(1.05)';

После второй строки останется только scale(1.05). Если нужно задать несколько преобразований, их передают одной CSS-строкой.

card.style.transform = 'translateX(24px) scale(1.05)';

Сброс inline-преобразования

Чтобы убрать значение из атрибута style, присвойте свойству пустую строку.

card.style.transform = '';

Удалится только inline-значение transform. Если преобразование задано обычным CSS-правилом, оно снова применится к карточке.

card.style.transform = ‘none’ не очищает свойство, а записывает inline-значение transform: none. Оно может перекрыть преобразование из CSS-правила.

style.transform и CSS-правила

style.transform читает только inline-значение. Если transform задан в CSS-классе, свойство вернёт пустую строку.

.card {
  transform: translateX(24px);
}

console.log(card.style.transform); // ''

Чтобы получить итоговое значение, которое браузер применил к элементу, используют getComputedStyle(card).transform.

Браузер может вернуть вычисленное значение в виде matrix(…), а не исходную запись translateX(24px). Это нормально: возвращается итоговый результат, а не строка из CSS-правила.

Итого

style.transform задаёт inline-преобразование элемента. Новое присваивание заменяет всё предыдущее значение, поэтому несколько функций записывают одной строкой. Пустая строка удаляет inline-стиль и возвращает управление обычным CSS-правилам.