Доброго дня. Сегодня хочу написать о свойствах CSS backface-visibility & transform-style. CSS-свойство backface-visibility определяет, будет ли видна задняя поверхность элемента, a transform-style - будут ли дочерние элементы расположены в трехмерном пространстве.
Transform-style
Давайте начнём со свойства transform-style. Свойство имеет два значения flat и preserve-3d. Если мы установим второе значение, то все дочерние элементы будут расположены в 3D пространстве.
Например нам нужно сделать куб. Воспользуемся данным свойством.
Если мы установим значение flat, то все грани куба окажутся в одной плоскости.
Backface-visibility
Свойство позволяет увидеть заднюю грань элемента в 3D пространстве. Для этого необходимо указать значение visible. В противном случае - hidden.
Рассмотрим на примере куба. У нас есть два куба с одинаковыми стилями, только одному мы добавляем класс show (backface-visibility со значением visible), а другому hidden (backface-visibility со значением hidden).
Источники