css властивість transform-style

Властивість transform-style визначає, спосіб відображення нащадків елементу в 3D-просторі. Властивість задає, чи чи нащадки будуть об'ємними, чи пласкими.

Якщо плющені - нащадки не існуватимуть самостійно у 3D-просторі.

правити

Нотатка

Ця властивість використовується разом з властивістю transform.

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

Нотатка

Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка transform-style може змінюватися у майбутньому.

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

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

Синтаксис

transform-style: flat|preserve-3d|initial|inherit;

Властивість transform-style може отримувати 4 значень:

flat

Вкладені елементи НЕ зберігатимуть свою 3-d позицію. Без задання.

автор: Svitlana

правити

preserve-3d

Вкладені елементи зберігатимуть свою 3-d позицію.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
transform-style	36.0 <br> 12.0 -webkit-	16.0 <br> 10.0 -moz-	9.0 <br> 4.0 -webkit-	23.0 <br> 15.0 -o-	12.0	10.0

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

Переглядач
transform-style	3.0 -webkit-	16.0 <br> 10.0 -moz-	9.2 <br> 3.2 -webkit-

Приклади

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

<div class="scene"><div class="parent flat"><div class="child">flat</div></div></div>
<div class="scene"><div class="parent keep"><div class="child">preserve-3d</div></div></div>

.scene {
    display: inline-block;
    margin-right: 48px;
    perspective: 500px;
}

.parent {
    width: 120px;
    height: 120px;
    background: #9dcb4e;
    transform: rotateY(60deg);
}

.flat { transform-style: flat; }
.keep { transform-style: preserve-3d; }

.child {
    width: 80px;
    height: 80px;
    margin: 20px;
    display: grid;
    place-items: center;
    background: #0172ad;
    color: #fff;
    transform: rotateY(-60deg);
}