Visibilidade da face posterior - CSS-Tricks

A backface-visibilitypropriedade está relacionada às transformações 3D. Com as transformações 3D, você pode girar um elemento para que o que consideramos a “frente” de um elemento não fique mais voltado para a tela. Por exemplo, isso afastaria um elemento da tela:

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

Vai parecer que você o pegou com uma espátula e o virou como uma panqueca. Isso porque o padrão para backface-visibilityé visible. Em vez de ser visível, você pode ocultá-lo.

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

Exemplo simples:

Veja o Pen FjwGA de Chris Coyier (@chriscoyier) no CodePen.

Isso é útil ao fazer efeitos 3D. Por exemplo:

Funciona corretamente

Frente Traseira

Problemático no WebKit porque a visibilidade da face posterior não está oculta

Frente Traseira

Isso não é problemático no Firefox por qualquer motivo, embora a propriedade funcione da mesma maneira.

Prefixos

Suporte para Firefox 10+ e IE 10+ backface-visibilitysem prefixo. Opera (pós Blink, 15+), Chrome, Safari, iOS e Android, todos precisam -webkit-backface-visibility.

Valores

visível (padrão) - o elemento sempre estará visível, mesmo quando não estiver voltado para a tela.
oculto - o elemento não é visível quando não está voltado para a tela.
herdar - a propriedade obterá seu valor de seu elemento pai.
inicial - define a propriedade para seu padrão, que é visible.

Mais Informações

Testador 3D CSS
Spec
Mozilla Docs

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.