Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Свойство transition в CSS3 Свойство transform-origin в CSS3

Метод использования и примеры CSS3 transform-style

Свойство transform-style CSS определяет, должны ли подэлементы элемента быть расположены в 3D-пространстве или разложены на плоскости элемента. Если элемент сплющен, подэлементы не будут существовать в трёхмерном пространстве.

Этот атрибут применяется только к элементам сtransformУказать подэлементы свойств.

В таблице приведены инструкции по использованию и истории версий этого свойства, а также синтаксис использования этого свойства в скриптах JavaScript.

Значение по умолчанию:	flat
Подходит для:	Преобразуемые элементы
Инheritance:	Нет
Анимируемо:	Нет.См. также Атрибут анимации.
Версия:	Новая функция CSS3
Синтаксис JavaScript:	Элемент.style.transformStyle="preserve-3d"

Использование синтаксиса transform-style

Грамматика этого свойства выглядит следующим образом:

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;
　　　　
　　　　transform:　rotate(30deg);
　　　　transform-style:　preserve-3d;
}

Проверьте, как это работает‹/›

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

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

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

Совместимость браузеров

Совместимость браузеров для свойства transform-style, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox 10+ ^-moz-, 16 + Chrome 12+ ^-webkit-, 36+ Internet Explorer 11+ Apple Safari 4+ ^-webkit- Opera 15+ 　 ^-webkit-, 23+

Дополнительное чтение

Узнайте больше из следующих руководств:CSS3 2D-трансформации,CSS3 3D-трансформации

Связанные свойства:backface-visibility,perspective,perspective-origin,transform,transform-origin.

Свойство transition в CSS3 Свойство transform-origin в CSS3