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-трансформации и к родителю, и к потомкам, и при этом учитывать их визуальное взаимодействие. Классическим примером такой ситуации является куб, собранный из шести элементов-сторон.

+ Развернуть