backface-visibility

Свойство backface-visibility управляет видимостью задней части элемента, если тот развёрнут относительно пользователя с помощью свойства transform. Это нужно только для 3D-трансформаций, для 2D-трансформаций свойство не имеет эффекта. Оно используется для создания более реалистичных 3D-сцен, скрывая изнанку объектов при их вращении.

Задняя сторона будет скрыта:

        
          
          .element {  transform: rotateY(180deg);  backface-visibility: hidden;}
          .element {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

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

Есть всего два возможных значения:

• visible — значение по умолчанию, задняя сторона элемента видна. Например, при вращении элемента на 180 градусов его задняя часть будет отображаться;
• hidden — задняя сторона элемента не видна. Это полезно, когда вы хотите скрыть обратную сторону элемента при его вращении, что создаёт иллюзию, будто элемент исчезает, когда повёрнут спиной.

Свойство backface-visibility работает исключительно в 3D-пространстве и не влияет на элементы, которые трансформируются только в двух измерениях. Это свойство становится важным, когда элементы вращаются вокруг оси x, y или одновременно вокруг обеих осей, создавая видимость «изнанки».

Чтобы backface-visibility работало корректно, необходимо учитывать свойство transform-style, которое должно быть установлено в значение preserve-3d на родительском элементе. Это позволяет сохранять 3D-контекст для дочерних элементов при их трансформациях.

💡 backface-visibility не наследуется от родительских элементов. Для каждого элемента нужно отдельно задать это свойство, если оно требуется.

💡 Используйте backface-visibility: hidden, если элемент должен выглядеть как односторонний. Это часто применяется для карточек в анимациях «переворота», чтобы задняя часть карточки не отображалась, пока она не будет явно повёрнута.

💡 Помните, что backface-visibility не влияет на элементы, которые не участвуют в 3D-трансформациях, поэтому перед его использованием убедитесь, что элемент вращается в 3D.