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

Определяет, как дочерние элементы будут отображаться в 3D-пространстве. Это свойство должно использоваться совместно со свойством transform.

CSS синтаксис

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

Возможные значения

ЗначениеОписание
flatЗначение по умолчанию. Дочерние элементы не сохраняют свою позицию в 3D-пространстве.
preserve-3dДочерние элементы сохраняют свою позицию в 3D-пространстве.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем, чтобы дочерние элементы сохраняли свое положение в 3D-пространстве


div {
     -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
     -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
     transform: rotateY(60deg);
     transform-style: preserve-3d;
}