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


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

Властивість `transform-style`

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

Нотатка:

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

Нотатка:

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

Синтаксис

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

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

flat

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

preserve-3d

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

initial

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

inherit

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

Значення без задання: flat
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.transformStyle="preserve-3d"

Переглядачі

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

36.0
12.0 -webkit-

10.0

16.0
10.0 -moz-

9.0
4.0 -webkit-

23.0
15.0 -o-

12.0

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

3.0 -webkit-

16.0
10.0 -moz-

9.2
3.2 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Приклад роботи обох значень властивості

Простий приклад роботи властивості

Дочірні елементі наслідують перетворення

div { 


  -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */ 


  -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ 


  transform: rotateY(60deg); 


  transform-style: preserve-3d; 


} 

Додаткові посилання