Propriedade Transform Style
Última atualização: 2026-09-13
transform-style Propriedade Transform Style
A propriedade transform-style decide se os filhos de um elemento mantêm suas posições 3D no espaço. O valor padrão flat achata os filhos no plano 2D do pai; com preserve-3d os filhos podem ser posicionados em um espaço 3D independente, e combinado com perspective constrói cenas genuinamente tridimensionais.
| Categoria | |
|---|---|
| Valor Inicial | flat |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
transform-style: flat | preserve-3d;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
flat | preserve-3d | Palavra-chave | Se os filhos mantêm suas posições 3D |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform-style | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Suportado em todos os principais navegadores | |||||
Importante： preserve-3d não é herdado: você deve defini-lo explicitamente no pai que deve manter o espaço 3D, e esse pai geralmente também precisa de uma perspective para a profundidade ser visível.
Aviso： Propriedades como overflow: hidden, opacity e filter forçam um novo contexto de achatamento e podem quebrar o efeito 3D de preserve-3d.
❓ Perguntas Frequentes
QQuando preciso usar o valor transform-style: preserve-3d?
AQuando os filhos precisam de profundidade real dentro do espaço 3D do pai — como um cubo 3D, um flip de cartão ou camadas empilhadas. Para transformações planares comuns como girar, escalar ou transladar em um plano, o flat padrão é suficiente: flat prensa cada filho no plano do pai, então apenas um efeito 2D é visível.
QPor que ainda não há efeito 3D mesmo depois que defini preserve-3d?
AA causa mais comum é a falta de perspective: sem perspective não há encurtamento perspectivo e a rotação não mostra profundidade. A segunda causa é um overflow: hidden, uma opacity abaixo de 1 ou um filter no pai ou em um ancestral — cada um força o espaço 3D a ser achatado de volta a um plano. Verificar esses dois pontos geralmente resolve.
QQual é a diferença entre transform-style: preserve-3d e perspective?
Aperspective define a distância do observador até o plano z=0, o que define a força da perspectiva. Pode ser declarada no pai para afetar todos os filhos 3D uniformemente, ou usada como a função transform: perspective() em um único elemento. transform-style: preserve-3d decide se os filhos mantêm suas posições 3D. Ambas são necessárias juntas para criar cenas 3D reais.
QQual é o suporte de transform-style: preserve-3d nos navegadores?
ATodos os navegadores modernos suportam preserve-3d, mas o Safari tem um histórico de suporte inconsistente a transformações 3D, e algumas combinações podem ser silenciosamente rebaixadas para flat. Se o 3D falhar no Safari, aplique a transformação 3D diretamente nos filhos com a função perspective(), evitando a dependência de um contexto 3D do pai.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
