transform-style

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Свойство transform-style CSS определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.

Если flat, то дочерний элемент  не будет существовать в своём собственном 3D-пространстве.

Поскольку это свойство не наследуется, его следует устанавливать для всех не прямых потомков элемента.

Начальное значениеflat
Применяется ктрансформируемые элементы
Наследуетсянет
Обработка значениякак указано
Animation typediscrete
Создаёт контекст наложенияда

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 | (en-US) 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! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 12-webkit (en-US) 10 (10)-moz (en-US)
16 (16)		 10[1] 15-webkit (en-US) (Да)-webkit (en-US)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0-webkit (en-US) 10.0 (10)-moz (en-US)
16.0 (16)		 8.1 (Да)-webkit (en-US) (Да)-webkit (en-US)

[1] Internet Explorer currently doesn't support the preserve-3d value.

See also