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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
Хром | Fire Fox | IE | Край | Сафари |
---|---|---|---|---|
12 * | 10 * | 11 | 12 | 4 * |
Мобильный / планшет
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 3 * | 3,2 * |