style.transform в JavaScript — зсув, поворот, масштаб

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

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

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

Приклад:

let element = document.getElementById('myElement');
element.style.transform = 'translateX(50px)';

У цьому прикладі елемент з ідентифікатором myElement буде зміщений на 50 пікселів вправо. translateX - це одна з багатьох функцій трансформації, яку можна використовувати з element.style.transform.

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

• translateY(value) - зміщує елемент вертикально.
• rotate(angle) - обертає елемент на заданий кут.
• scaleX(factor) - масштабує елемент по горизонталі.
• scaleY(factor) - масштабує елемент по вертикалі.
• skewX(angle) - нахиляє елемент по горизонталі.
• skewY(angle) - нахиляє елемент по вертикалі.

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

let element = document.getElementById('myElement');
element.style.transform = 'translateX(50px) rotate(45deg)';

У цьому прикладі елемент буде спочатку зміщений на 50 пікселів вправо, а потім обернеться на 45 градусів.

Трансформації можуть бути дуже корисними для створення анімацій. Ви можете використовувати їх разом з CSS-транзиціями або JavaScript для плавних ефектів. Наприклад:

let element = document.getElementById('myElement');
element.style.transition = 'transform 0.5s ease-in-out';
element.style.transform = 'scale(1.5)';

У цьому прикладі елемент плавно збільшиться в 1.5 рази протягом 0.5 секунди.

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

Важливо правильно використовувати одиниці вимірювання та кути в функціях трансформації. Наприклад, для обертання використовуйте градуси (deg), а для масштабування - числові значення.

element.style.transform є потужним інструментом для розробки інтерактивних та динамічних веб-сторінок. Він дозволяє легко змінювати вигляд та поведінку елементів, роблячи ваші веб-додатки більш привабливими та зручними для користувачів.

правити

Порада

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

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

Порада

Не забувайте про GPU-акселерацію при застосуванні трансформацій. Додавання трансформацій, таких як translateZ(0) або scaleZ(1), може допомогти браузеру використовувати апаратне прискорення, що покращить продуктивність. Це особливо важливо для складних або численних трансформацій, які можуть вплинути на швидкість роботи веб-сторінки.

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

Порада

Застосовуйте 3D-трансформації для створення глибини і перспективи. Використовуйте функції, такі як rotateX, rotateY та translateZ, щоб додати вражаючі візуальні ефекти в 3D-просторі. Це може значно покращити візуальну привабливість ваших веб-додатків.

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

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

Синтаксис

element.style.transform

Переглядачі

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

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

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

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

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

Приклади

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

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

let element = document.getElementById('card');
element.style.transition = 'transform 0.5s';
element.style.transform = 'rotateY(180deg)';

<header>
  <h2 class="title">element.style.transform</h2>
  <p class="description">Змінює розташування, обертання, масштаб або нахил елемента.</p>
</header>
<main>
  <div class="result">
    <div id="interactiveBox" class="box"></div>
    <button id="rotateBtn">Обертати</button>
    <button id="scaleBtn">Масштабувати</button>
    <button id="moveBtn">Перемістити</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  text-align: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 0 auto;
  transition: transform 0.5s;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

let rotateAngle = 0;
let scaleFactor = 1;
let translateX = 0;
let translateY = 0;

document.getElementById('rotateBtn').addEventListener('click', () => {
  rotateAngle += 45;
  updateTransform();
});

document.getElementById('scaleBtn').addEventListener('click', () => {
  scaleFactor = scaleFactor === 1 ? 1.5 : 1;
  updateTransform();
});

document.getElementById('moveBtn').addEventListener('click', () => {
  translateX += 20;
  translateY += 20;
  updateTransform();
});

function updateTransform() {
  let element = document.getElementById('interactiveBox');
  element.style.transform = `rotate(${rotateAngle}deg) scale(${scaleFactor}) translate(${translateX}px, ${translateY}px)`;
}
//# sourceURL=pen.js

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

let element = document.getElementById('ball');
element.style.transition = 'transform 1s';
element.style.transform = 'translateX(100px) translateY(200px) scale(1.5)';