Propriedade Backface Visibility
Última atualização: 2026-09-13
backface-visibility Propriedade Backface Visibility
A propriedade backface-visibility controla se um elemento é visível quando, após uma rotação 3D, sua face posterior está voltada para o observador. O valor padrão visible mostra o conteúdo frontal espelhado na face posterior; com hidden, o elemento fica invisível quando sua face posterior está voltada para o observador. Isso é comumente usado em viradas de cartão, cubos e outros efeitos 3D que distinguem a frente do verso.
| Categoria | |
|---|---|
| Valor Inicial | visible |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
backface-visibility: visible | hidden;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
visible | hidden | Palavra-chave | Se a face posterior é visível |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| backface-visibility | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Suportado em todos os principais navegadores | |||||
Importante： A backface-visibility só entra em vigor sob transformações 3D (transform-style: preserve-3d); uma rotação 2D nunca mostra uma face posterior.
Dica： Em uma virada de cartão, ambas as faces precisam de backface-visibility: hidden, e a face posterior é pré-rotacionada com rotateY(180deg) para ficar atrás.
❓ Perguntas Frequentes
QPor que vejo um texto espelhado depois de virar um elemento com CSS?
AO padrão é backface-visibility: visible, então quando a face posterior de um elemento está voltada para o observador, o conteúdo frontal é mostrado espelhado — como um reflexo transparente. Para uma virada de cartão adequada, defina backface-visibility: hidden em ambas as faces e pré-rotationa a face posterior com rotateY(180deg); durante a virada, as duas faces ficam visíveis alternadamente.
QA propriedade backface-visibility afeta o desempenho de renderização?
ACom hidden, o navegador pode pular o trabalho de pintar a face posterior invisível, o que pode na verdade melhorar o desempenho de renderização em cenas 3D — uma prática recomendada. Em contraste, visible mantém ambas as faces pintadas o tempo todo. Para casos sensíveis a desempenho com muitos cartões 3D, defina hidden uniformemente e controle a visibilidade conforme necessário.
QO backface-visibility funciona com rotações 2D nas transformações do CSS?
ANão, lá é sem sentido. Uma rotação 2D como rotate 45deg nunca vira o elemento, então a face posterior nunca fica voltada para o observador e o backface-visibility não entra em ação. Só importa sob transformações 3D: quando rotateY(180deg) ou rotateX(180deg) afasta o elemento do observador, hidden esconde a face posterior.
QComo construo um efeito de virada de cartão 3D com backface-visibility?
AQuatro passos: defina transform-style: preserve-3d no contêiner pai; posicione absolutamente as faces frontal e posterior uma sobre a outra e dê a ambas backface-visibility: hidden; pré-rotatione a face posterior com rotateY(180deg); depois rotacione o pai para rotateY(180deg) na interação. Combinado com uma transição, você obtém uma virada suave.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
