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

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

element.style.transformStyle - це властивість CSS, яка визначає, як дочірні елементи елемента будуть відображатися в тривимірному просторі. Властивість може приймати два значення: flat (за замовчуванням) і preserve-3d.

Коли element.style.transformStyle встановлено на flat, усі дочірні елементи відображаються в одній площині, тобто в 2D-просторі. Це означає, що будь-які 3D-трансформації, застосовані до дочірніх елементів, не впливатимуть на їхню перспективу відносно батьківського елемента. Навпаки, якщо встановлено значення preserve-3d, дочірні елементи будуть відображатися в 3D-просторі, зберігаючи свої 3D-трансформації і перспективу відносно батьківського елемента.

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

Приклад:

let element = document.getElementById('parentElement');
element.style.transformStyle = 'preserve-3d';

У цьому прикладі елемент з ідентифікатором parentElement встановлюється для збереження 3D-простору для своїх дочірніх елементів. Це корисно, коли ви хочете створити складні 3D-ефекти, які потребують взаємодії між батьківським і дочірніми елементами.

Розглянемо більш складний приклад з анімацією. Припустимо, у вас є батьківський елемент, який містить декілька дочірніх елементів, і ви хочете, щоб ці дочірні елементи оберталися в 3D-просторі:

let parentElement = document.getElementById('parentElement');
parentElement.style.transformStyle = 'preserve-3d';

let childElement1 = document.getElementById('childElement1');
let childElement2 = document.getElementById('childElement2');

childElement1.style.transform = 'rotateY(45deg)';
childElement2.style.transform = 'rotateX(45deg)';

У цьому прикладі батьківський елемент parentElement встановлений для збереження 3D-простору. Два дочірні елементи обертаються навколо осей Y та X відповідно. Завдяки preserve-3d, обертання дочірніх елементів відображаються правильно у 3D-просторі, зберігаючи їхню перспективу.

Важливо розуміти, що preserve-3d дозволяє дочірнім елементам взаємодіяти в тривимірному просторі, що може бути корисним для створення складних анімацій та візуальних ефектів. Однак, не всі браузери можуть однаково добре підтримувати цю властивість, тому перевірка сумісності є важливим кроком при її використанні.

Таким чином, element.style.transformStyle є потужним інструментом для керування 3D-ефектами на веб-сторінці, дозволяючи створювати більш глибокі та реалістичні візуальні взаємодії між елементами.

правити

Порада

Пам'ятайте, що transformStyle: preserve-3d може вплинути на продуктивність, особливо на мобільних пристроях. Використовуйте цю властивість лише тоді, коли дійсно необхідно, і оптимізуйте інші частини коду для зменшення навантаження на процесор. Наприклад, зменште кількість одночасно анімованих елементів або скористайтеся апаратним прискоренням для покращення продуктивності.

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

Порада

При анімації елементів у 3D-просторі, не забувайте про властивість backfaceVisibility, яка визначає, чи буде видима зворотна сторона елемента. Наприклад, element.style.backfaceVisibility = 'hidden'; приховає зворотну сторону елемента, що може бути корисним для створення реалістичних обертів.

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

Порада

Для створення складних 3D-анімацій, встановіть transformStyle на preserve-3d для батьківського елемента, а потім застосуйте різні 3D-трансформації до дочірніх елементів. Це дозволить вам легко керувати об'єктами в 3D-просторі, створюючи вражаючі візуальні ефекти.

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

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

Синтаксис

element.style.transformStyle

Переглядачі

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

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

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

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

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

Приклади

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

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

let container = document.getElementById('container');
container.style.transformStyle = 'preserve-3d';
container.style.perspective = '1000px';

let cardFront = document.getElementById('cardFront');
let cardBack = document.getElementById('cardBack');

cardFront.style.transform = 'rotateY(0deg)';
cardBack.style.transform = 'rotateY(180deg)';

container.addEventListener('click', () => {
    if (container.style.transform === 'rotateY(180deg)') {
        container.style.transform = 'rotateY(0deg)';
    } else {
        container.style.transform = 'rotateY(180deg)';
    }
    container.style.transition = 'transform 0.5s';
});

<header>
  <h2 class="title">element.style.transformStyle</h2>
  <p class="description">Визначає, як дочірні елементи будуть відображатися в 3D-просторі.</p>
</header>
<main>
  <div class="result">
    <div id="cube">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
      <div class="face left">Left</div>
      <div class="face right">Right</div>
      <div class="face top">Top</div>
      <div class="face bottom">Bottom</div>
    </div>
    <div class="controls">
      <button id="rotateX">Обертати по X</button>
      <button id="rotateY">Обертати по Y</button>
      <button id="toggle3D">Перемикання 3D</button>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
  height: 100vh;
  margin: 0;
}

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);
  text-align: center;
}

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);
  perspective: 800px;
  text-align: center;
}

#cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0);
  transition: transform 0.5s;
  left: 40%;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

.front { transform: translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

.controls {
  margin-top: 20px;
}

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

let cube = document.getElementById('cube');
let angleX = 0;
let angleY = 0;
let is3D = true;

document.getElementById('rotateX').addEventListener('click', () => {
  angleX += 45;
  updateCubeTransform();
});

document.getElementById('rotateY').addEventListener('click', () => {
  angleY += 45;
  updateCubeTransform();
});

document.getElementById('toggle3D').addEventListener('click', () => {
  is3D = !is3D;
  cube.style.transformStyle = is3D ? 'preserve-3d' : 'flat';
});

function updateCubeTransform() {
  cube.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg)`;
}
//# sourceURL=pen.js

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

let parentElement = document.getElementById('parent');
parentElement.style.transformStyle = 'preserve-3d';
parentElement.style.perspective = '800px';

let childElement1 = document.getElementById('child1');
let childElement2 = document.getElementById('child2');

childElement1.style.transform = 'rotateY(45deg) translateZ(100px)';
childElement2.style.transform = 'rotateY(-45deg) translateZ(100px)';