CSS-свойство backface-visibility

CSS-свойство backface-visibility определяет, будет ли «обратная» сторона преобразованного элемента (transformed) видимой, если она поворачивается в сторону пользователя.

Значение по умолчанию:	`visible`
Применяется к:	Трансформируемые элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

backface-visibility: visible | hidden | initial | inherit

Примеры написания кода свойства backface-visibility:

.flip-container {
    margin: 50px;
    perspective: 1000px;
    display: inline-block;
}
.flip-container:hover .card {
    transform: rotateY(180deg);
}
.card, .front, .back {
    width: 130px;
    height: 195px;
}
.card {
    position: relative;
    transition: 0.5s all;
    transform-style: preserve-3d;
}
.front, .back {
    position: absolute;
    backface-visibility: hidden;
}
.front {
    z-index: 1;
    transform: rotateY(180deg);
}
.back {
    z-index: 2;
    transform: rotateY(0deg);
}

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

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`visible`	Указывает, что задняя грань видна, что позволяет зеркально отображать переднюю грань. Это значение установлено по умолчанию
`hidden`	Указывает, что задняя грань не видна, скрывая переднюю грань.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `backface-visibility`.