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

Свойство transform-style определяет, как дочерние элементы отображаются в трёхмерном (3D) пространстве.

Это свойство входит в число свойств CSS3.

Оно работает только со свойством transform.

Свойство transform-style имеет два значения: flat и preserve-3d. Если установлено значение "flat", дочерние элементы не будут существовать самостоятельно в 3D-пространстве.

INFO

Для обеспечения максимальной совместимости с браузерами к этому свойству применяется префикс -webkit- для Safari, Google Chrome и Opera (новых версий).

Начальное значение	flat
Применяется к	Элементы, поддающиеся трансформации.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.transformStyle = "flat";

Синтаксис

Значения CSS transform-style

css

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

Пример использования свойства transform-style:

Пример кода CSS transform-style

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element {
        position: relative;
        height: 250px;
        width: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      #element1 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #8ebf42;
        -webkit-transform: rotateY(50deg);
        -webkit-transform-style: preserve-3d;
        transform: rotateY(50deg);
        transform-style: preserve-3d;
      }
      #element2 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #1c87c9;
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div id="element">
      <div id="element1">
        Green
        <div id="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Результат

CSS transform-style property

Пример свойства transform-style со значением "flat":

Пример использования свойства CSS transform-style со значением flat

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        position: relative;
        height: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #cccccc;
        background-color: #eeeeee;
      }
      .element1 {
        margin: 20px;
        border: 1px dotted;
        height: 150px;
        width: 150px;
        background-color: green;
        transform: rotateX(15deg);
        transform-style: flat;
      }
      .element2 {
        margin: 20px;
        border: 1px dotted;
        height: 200px;
        width: 200px;
        background-color: lightgreen;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div class="element">
      <div class="element1">
        Green
        <div class="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Свойство transform-style работает только со свойством

transition.animation-name.transform.

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

Синтаксис ​

Пример использования свойства transform-style: ​

Результат ​

Пример свойства transform-style со значением "flat": ​

Значения ​