CSS transform-style: синтаксис, значения, примеры

CSS свойство transform-style управляет тем, остаются ли дочерние элементы трансформированного элемента в том же 3D-пространстве рендеринга, что и их родитель, или же они «прижимаются» к плоскости родителя. Именно это свойство превращает набор вложенных transform-блоков в настоящую 3D-сцену, а не в плоское изображение.

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

Что означает «контекст 3D-рендеринга»

Когда вы поворачиваете элемент в 3D (например, transform: rotateY(50deg)), браузер должен решить, являются ли потомки этого элемента частью одного 3D-мира или просто нарисованы на поверхности родителя, как наклейка.

flat (значение по умолчанию) прижимает все дочерние элементы к 2D-плоскости родителя. Дочерний элемент может трансформироваться, но существует в своём собственном «плоском» пространстве — он не может «выступать вперёд» или «уходить за» родителя в 3D.
preserve-3d сохраняет дочерние элементы в системе координат 3D родителя, так что значения rotateX/rotateY/translateZ интерпретируются относительно единой точки схода. Именно это позволяет строить кубы, эффекты переворота карточек и многослойные 3D-сцены.

transform-style работает в паре со свойством perspective: задайте perspective на родительском элементе, чтобы определить интенсивность 3D-эффекта, и transform-style: preserve-3d на родителе, чтобы его дочерние элементы действительно существовали в этом 3D-пространстве.

Информация

preserve-3d переопределяется рядом других свойств: применение overflow (отличного от visible), clip-path, filter, opacity ниже 1 или mask к тому же элементу принудительно выполняет группировку, «сплющивающую» дочерние элементы. Если ваша 3D-сцена внезапно стала плоской, проверьте наличие одного из этих свойств на элементе с preserve-3d.

Информация

Для максимальной совместимости с браузерами можно использовать префикс -webkit- (Safari, старые версии Chrome и Opera) наряду с версией без префикса. Современные браузеры поддерживают transform-style без префикса.

Initial Value	flat
Applies to	Transformable elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.transformStyle = "flat";

Синтаксис

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

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

Пример свойства transform-style:

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

<!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>

Попробуйте сами »

Результат

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

Пример CSS transform-style со значением flat

<!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>

Попробуйте сами »

Значения

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

Когда использовать

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

Переворот карточки — карточка с лицевой и обратной стороной: контейнер получает preserve-3d, а обратная сторона повёрнута на rotateY(180deg), чтобы находиться за лицевой.
3D-куб / карусель — шесть граней, каждая смещена с помощью translateZ и повёрнута из общего центра.
Многослойные параллакс-сцены — дочерние элементы, выдвинутые вперёд и назад с помощью translateZ под общей perspective.

Оставляйте значение по умолчанию flat, когда применяете только одну «плоскую» трансформацию (масштабирование, поворот в плоскости, наклон) и не нуждаетесь в глубине — это дешевле в рендеринге и позволяет избежать неожиданностей, связанных с правилами «сплющивания».

Смежные свойства, которые полезно использовать вместе с transform-style:

perspective — задаёт выраженность 3D-эффекта.
perspective-origin — перемещает точку схода.
transform-origin — изменяет точку опоры каждой трансформации.
backface-visibility — скрывает обратную сторону повёрнутого элемента (необходимо при переворотах карточек).

Практика

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

transition.animation-name.transform.