transform-style

Свойство transform-style определяет, как будут вести себя потомки элемента в 3D-пространстве при трансформации.

        
          
          <div class="parent">  <div class="child"></div></div>
          <div class="parent">
  <div class="child"></div>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .parent {  transform-style: preserve-3d;}.child {  transform: rotateY(-30deg);}
          .parent {
  transform-style: preserve-3d;
}

.child {
  transform: rotateY(-30deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
          
          .parent {  transform-style: flat; /* По умолчанию */  transform-style: preserve-3d;}
          .parent {
  transform-style: flat; /* По умолчанию */
  transform-style: preserve-3d;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Свойство transform-style не наследуется. Нужно индивидуально задавать его для каждого следующего уровня вложенности.

На практике

Секция статьи "На практике"

Денис Ежков

Секция статьи "Денис Ежков"

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