JS властивість CSSStyleDeclaration.transformOrigin

Загальний опис

element.style.transformOrigin - це властивість, яка визначає точку, навколо якої застосовуються трансформації елемента. Вона дозволяє змінювати центр обертання, масштабування або іншої трансформації, що робить анімації та ефекти більш контрольованими та гнучкими.

Для роботи з властивістю element.style.transformOrigin вам потрібно спочатку вибрати елемент у DOM. Це можна зробити за допомогою методів, таких як document.getElementById або document.querySelector.

Приклад:

let element = document.getElementById('myElement');
element.style.transformOrigin = 'top left';
element.style.transform = 'rotate(45deg)';

У цьому прикладі елемент з ідентифікатором myElement обертається на 45 градусів навколо точки, яка знаходиться у верхньому лівому куті елемента. За замовчуванням, точка трансформації знаходиться в центрі елемента (50% 50%), але її можна змінити на будь-яку іншу позицію, використовуючи одиниці вимірювання, такі як відсотки (%), пікселі (px) або ключові слова (top, bottom, left, right, center).

Наступний приклад показує, як змінити точку трансформації для масштабування елемента:

let element = document.getElementById('myElement');
element.style.transformOrigin = 'bottom right';
element.style.transform = 'scale(1.5)';

Тут елемент масштабується в 1.5 рази навколо точки, що знаходиться у нижньому правому куті. Це корисно, коли вам потрібно, щоб елемент збільшувався або зменшувався від певної точки, а не від центру.

Крім ключових слів і відсотків, ви також можете використовувати пікселі для більш точної настройки точки трансформації:

let element = document.getElementById('myElement');
element.style.transformOrigin = '30px 40px';
element.style.transform = 'rotate(30deg)';

У цьому прикладі обертання відбувається навколо точки, що знаходиться на 30 пікселів праворуч і 40 пікселів вниз від верхнього лівого кута елемента. Це дає вам точний контроль над місцем, де повинні відбуватися трансформації.

Використання transformOrigin також важливе при створенні складних анімацій. Наприклад, якщо ви створюєте анімацію обертання руки на зображенні персонажа, ви можете встановити точку трансформації на плечі, щоб обертання виглядало природно:

let arm = document.getElementById('arm');
arm.style.transformOrigin = 'top left';
arm.style.transform = 'rotate(90deg)';

Важливо враховувати, що transformOrigin впливає на всі типи трансформацій, включаючи rotate, scale, skew та translate, тому використання цієї властивості допомагає досягти бажаних ефектів з високою точністю.

Таким чином, element.style.transformOrigin є потужним інструментом для налаштування та контролю точок застосування трансформацій, що дозволяє створювати складні та реалістичні анімації та ефекти на веб-сторінках.

Синтаксис

element.style.transformOrigin

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

let hand = document.getElementById('hand');
hand.style.transformOrigin = 'top right';
hand.style.transition = 'transform 0.5s';
hand.addEventListener('mouseover', () => {
    hand.style.transform = 'rotate(20deg)';
});
hand.addEventListener('mouseout', () => {
    hand.style.transform = 'rotate(0deg)';
});

let element = document.getElementById('door');
element.style.transformOrigin = 'left center';
element.style.transition = 'transform 1s';
element.addEventListener('click', () => {
    element.style.transform = 'rotateY(90deg)';
});