Видимост отзад - CSS-трикове

В backface-visibilityимота се отнася до 3D трансформации. С 3D трансформациите можете да успеете да завъртите елемент, така че това, което смятаме за „предната част“ на елемент, вече да не е обърнато към екрана. Например, това ще отклони елемент от екрана:

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

Ще изглежда така, сякаш сте го взели с шпатула и сте го обърнали като палачинка. Това е така, защото по подразбиране за backface-visibilityе visible. Вместо да се вижда, можете да го скриете.

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

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

Вижте Pen FjwGA от Chris Coyier (@chriscoyier) на CodePen.

Това е полезно, когато правите 3D ефекти. Например:

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

Отпред отзад

Проблемно в WebKit, защото видимостта на задния фон не е скрита

Отпред отзад

Това не е проблематично във Firefox по каквато и да е причина, въпреки че свойството работи по същия начин.

Префикси

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

Стойности

видим (по подразбиране) - елементът винаги ще бъде видим, дори когато не е обърнат към екрана.
скрит - елементът не се вижда, когато не е обърнат към екрана.
наследява - свойството will получава стойността си от родителския си елемент.
Initial - задава свойството по подразбиране, което е visible.

Повече информация

3D CSS тестер
Спецификация
Mozilla Docs

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.