Стиль трансформации - CSS-хитрости

transform-styleСвойство, когда применяется к элементу, определяет , если дети этого элемента расположены в 3D пространстве, или уплощенные.

.parent ( transform-style: preserve-3d; )

Он принимает одно из двух значений: flat(по умолчанию) и preserve-3d. Чтобы продемонстрировать разницу между двумя значениями, нажмите переключатель в CodePen ниже:

Посмотрите на эту ручку!

Когда кнопка нажата, демонстрация использует JavaScript для переключения transform-styleзначения между preserve-3dи flat.

Как видите, когда значение изменяется на flat, дочерние элементы больше не складываются в соответствии со translateZзначениями (в трехмерном пространстве), а вместо этого выравниваются, чтобы выглядеть так, как элементы по умолчанию на странице HTML.