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 є потужним інструментом для налаштування та контролю точок застосування трансформацій, що дозволяє створювати складні та реалістичні анімації та ефекти на веб-сторінках.

правити

Порада

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

автор: Bond правити

Порада

Поєднуйте transformOrigin з іншими CSS-властивостями для створення плавних анімацій. Використовуйте transition разом з transform і transformOrigin, щоб зробити зміни плавними та природними. Це допоможе вам покращити користувацький досвід, роблячи анімації більш привабливими.

автор: Bond правити

Порада

Налаштування transformOrigin може допомогти вам створити анімації масштабування з певної точки. Замість того щоб масштабувати елемент з його центру, ви можете змінити точку масштабування, щоб створити цікаві візуальні ефекти. Наприклад, ви можете збільшити елемент від нижнього правого кута, встановивши transformOrigin на 'bottom right'.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.transformOrigin

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	36	16	9	23	12	10

Підтримка: мобільні переглядачі

Переглядач
	37	36	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div id="hand">Демонстраційний елемент</div>

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)';
});

<div id="door">Демонстраційний елемент</div>

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