Обратная видимость - CSS-хитрости

Содержание

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

.flip ( transform: rotateY(180deg); )

Это будет выглядеть так, как будто вы взяли его лопаткой и перевернули, как блин. Это потому, что по умолчанию backface-visibilityиспользуется visible. Вместо того, чтобы быть видимым, вы можете скрыть это.

.flip ( transform: rotateY(180deg); backface-visibility: hidden; )

Простой пример:

См. Pen FjwGA Криса Койера (@chriscoyier) на CodePen.

Это полезно при создании 3D-эффектов. Например:

Работает правильно

Спереди Назад

Проблематично в WebKit, потому что видимость обратной стороны не скрыта

Спереди Назад

В Firefox это не проблема по какой-либо причине, хотя свойство работает точно так же.

Префиксы

Поддержка Firefox 10+ и IE 10+ backface-visibilityбез префикса. Opera (после Blink, 15+), Chrome, Safari, iOS и Android - все это необходимо -webkit-backface-visibility.

Значения

visible (по умолчанию) - элемент всегда будет виден, даже если не обращен к экрану.
скрытый - элемент не виден, если не смотреть на экран.
наследовать - свойство получит свое значение от своего родительского элемента.
initial - устанавливает свойство по умолчанию, то есть visible.

Дополнительная информация

Тестер 3D CSS
Спецификация
Документы Mozilla

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.