Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Свойство transform-style CSS определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.
Если flat, то дочерний элемент не будет существовать в своем собственном 3D-пространстве.
Поскольку это свойство не наследуется, его следует устанавливать для всех не прямых потомков элемента.
| Начальное значение | flat |
|---|---|
| Применяется к | трансформируемые элементы |
| Наследуется | нет |
| Отображение | визуальный |
| Обработка значения | как указано |
| Animation type | discrete |
| Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
| Создаёт контекст наложения | да |
Syntax
/* Keyword values */ transform-style: preserve-3d; transform-style: flat; /* Global values */ transform-style: inherit; transform-style: initial; transform-style: unset;
Values
preserve-3d- Показывает, что дочерний элемент должен быть спозиционирован в 3D-пространстве.
flat- Показывает, что дочерний элемент лежит в той же плоскости, что и родительский.
Formal syntax
flat | preserve-3d
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Transforms Level 1 Определение 'transform-style' в этой спецификации. |
Рабочий черновик | Initial definition |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 12-webkit | 10 (10)-moz 16 (16) |
10[1] | 15-webkit | (Да)-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 3.0-webkit | 10.0 (10)-moz 16.0 (16) |
8.1 | (Да)-webkit | (Да)-webkit |
[1] Internet Explorer currently doesn't support the preserve-3d value.