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.

Поддержка браузеров

Свойство transform-style поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.