css властивість transform-style
Властивість transform-style визначає, спосіб відображення нащадків елементу в 3D-просторі. Властивість задає, чи чи нащадки будуть об'ємними, чи пласкими.
Якщо плющені - нащадки не існуватимуть самостійно у 3D-просторі.
| Нотатка: | Ця властивість використовується разом з властивістю |
| Нотатка: | Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка |
Синтаксис
transform-style: flat|preserve-3d|initial|inherit;Властивість transform-style може отримувати 4 значення:
| Значення без задання: | flat |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.transformStyle="preserve-3d" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| transform-style | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| transform-style | 3.0 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Приклад роботи обох значень властивості
Простий приклад роботи властивості
Дочірні елементі наслідують перетворення
div {
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}