CSS-свойство transform-style

CSS-свойство transform-style указывает, расположены ли дочерние элементы в 3D-пространстве или в той же плоскости элемента.

Это свойство применяется только к дочерним элементам, для которых задано свойство transform.

Значение по умолчанию:	`flat`
Применяется к:	Трансформируемые элементы
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства transform-style:

img {
    /* Chrome, Safari, Opera */
    -webkit-transform: rotate(30deg);
    -webkit-transform-style: preserve-3d;
    /* Firefox */
    -moz-transform: rotate(30deg);
    -moz-transform-style: preserve-3d;
    /* IE 9 */
    -ms-transform: rotate(30deg);
    -ms-transform-style: preserve-3d;
    /* Standard syntax */
    transform: rotate(30deg);
    transform-style: preserve-3d;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`flat`	Дочерние элементы лежат в плоскости самого элемента. Это значение установлено по умолчанию.
`preserve-3d`	Дочерние элементы должны быть расположены в 3D-пространстве..
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `transform-style`.