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