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` може вплинути на продуктивність, особливо на мобільних пристроях. Використовуйте цю властивість лише тоді, коли дійсно необхідно, і оптимізуйте інші частини коду для зменшення навантаження на процесор. Наприклад, зменште кількість одночасно анімованих елементів або скористайтеся апаратним прискоренням для покращення продуктивності.
Порада:	При анімації елементів у 3D-просторі, не забувайте про властивість `backfaceVisibility`, яка визначає, чи буде видима зворотна сторона елемента. Наприклад, `element.style.backfaceVisibility = 'hidden';` приховає зворотну сторону елемента, що може бути корисним для створення реалістичних обертів.
Порада:	Для створення складних 3D-анімацій, встановіть `transformStyle` на `preserve-3d` для батьківського елемента, а потім застосуйте різні 3D-трансформації до дочірніх елементів. Це дозволить вам легко керувати об'єктами в 3D-просторі, створюючи вражаючі візуальні ефекти.

Синтаксис

element.style.transformStyle

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

Цей приклад надає користувачу можливість обертати куб навколо осей X і Y за допомогою кнопок, а також перемикати режим відображення дочірніх елементів у 3D-просторі. Властивість transformStyle дозволяє визначити, як будуть відображатися дочірні елементи при обертанні куба, що створює різні візуальні ефекти.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/JjQWprx">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

JS довідник

JavaScript

Наповнення JS розділу