w3docs logo

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

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

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

Свойство имеет две значения - flat и preserve-3d. При значении "flat" дочерние элементы не могут существовать в трехмерном пространстве.

Для максимальной совместимости браузера может быть использовано расширение -webkit- для Safari, Google Chrome и Opera (новые версии).
Значение по умолчанию flat
Применяется К трансформируемым элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.transformStyle = "flat";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #element {
      position: relative;
      height: 250px;
      width: 250px;
      margin: 50px;
      padding: 10px;
      border: 2px solid #666;
      background-color: #eee;
      }
      #element1 {
      padding: 50px;
      position: absolute;
      border: 2px solid #000;
      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 #000;
      background-color: #1c87c9;
      -webkit-transform: rotateY(-100deg);
      transform: rotateY(-100deg);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transform-style</h2>
    <div id="element">
      <div id="element1">
        Green
        <div id="element2">Blue</div>
      </div>
    </div>
  </body>
  </html

Значения

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

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

chrome firefox safari opera
36.0+
12.0-35.0 -webkit- 		16.0+
10.0-15.0 -moz- 		4.0+
-webkit- 		23.0+
15.0-22.0 -webkit-

Практикуйте свои знания

Какие значения могут быть установлены для свойства CSS 'transform-style'?
❮ Назад Вперед ❯
Считаете ли это полезным?