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

transform-style — это свойство CSS, которое задаёт, располагаются ли дочерние элементы в 3D-пространстве или сплющиваются в плоскости элемента.

Попробуйте

transform-style: flat;

transform-style: preserve-3d;

<section class="default-example" id="default-example">
  <div class="transition-all layer" id="example-element">
    <p>Parent</p>
    <div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div>
  </div>
</section>

.layer {
  background: #623e3f;
  border-radius: 0.75rem;
  color: white;
  transform: perspective(200px) rotateY(30deg);
}

.numeral {
  background-color: #ffba08;
  border-radius: 0.2rem;
  color: black;
  margin: 1rem;
  padding: 0.2rem;
  transform: rotate3d(1, 1, 1, 45deg);
}

При сплющивании дочерние элементы не будут существовать отдельно в 3D-пространстве.

Поскольку это свойство не наследуется, его необходимо задавать для всех потомков элемента, кроме конечных.

Синтаксис

/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;

Значения

Свойству задаётся одно из следующих ключевых слов:

flat

Указывает, что дочерние элементы расположены в плоскости самого элемента.

preserve-3d

Указывает, что дочерние элементы должны располагаться в 3D-пространстве.

Описание

Спецификация перечисляет некоторые значения группирующих свойств, для которых пользовательский агент должен создать сплющенное представление дочерних элементов, прежде чем применить их. Поэтому для элемента принудительно задаётся используемое значение transform-style: flat, даже если указано preserve-3d. К таким значениям свойств относятся:

• overflow: любое значение, кроме visible или clip.
• opacity: любое значение меньше 1.
• filter: любое значение, кроме none.
• clip: любое значение, кроме auto.
• clip-path: любое значение, кроме none.
• isolation: используемое значение isolate.
• mask-image: любое значение, кроме none.
• mask-border-source: любое значение, кроме none.
• mix-blend-mode: любое значение, кроме normal.
• contain: paint и любое другое сочетание свойства и значения, которое приводит к изоляции отрисовки. Сюда относятся любые свойства, влияющие на используемое значение свойства contain, например content-visibility: hidden.

Формальное определение

Формальный синтаксис

transform-style = 
  flat |
  preserve-3d

Примеры

Демонстрация transform-style

В этом примере с помощью трансформаций создан трёхмерный куб. Для родительского контейнера граней куба по умолчанию задано transform-style: preserve-3d, поэтому он трансформируется в 3D-пространстве и отображается так, как задумано.

Также доступен флажок, позволяющий переключаться между этим значением и transform-style: flat. В этом альтернативном состоянии грани куба сплющиваются в плоскости родительского элемента, и в зависимости от используемого браузера вы можете вообще их не увидеть.

HTML

<section id="example-element">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

<div class="checkbox">
  <label for="preserve"><code>preserve-3d</code></label>
  <input type="checkbox" id="preserve" checked />
</div>

CSS

#example-element {
  margin: 50px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

JavaScript

const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");

checkbox.addEventListener("change", () => {
  cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});

Результат

Спецификации

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

См. также

• Использование трансформаций CSS