A transform-stylepropriedade, quando aplicada a um elemento, determina se os filhos desse elemento estão posicionados no espaço 3D ou achatados.
.parent ( transform-style: preserve-3d; )Ele aceita um de dois valores: flat(o padrão) e preserve-3d. Para demonstrar a diferença entre os dois valores, clique no botão de alternância na CodePen abaixo:
Quando o botão é clicado, a demonstração usa JavaScript para alternar o transform-stylevalor entre preserve-3de flat.
Como você pode ver, quando o valor é alterado para flat, os elementos filhos não são mais empilhados de acordo com os translateZvalores (no espaço 3D), mas se achatam para aparecer da maneira que os elementos são por padrão em uma página HTML.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Nenhum | 3,0+ | 3,2+ |
Todos os navegadores exigem prefixos do fornecedor, exceto Firefox 16+. Opera usa a -webkit-partir da versão 15 e a conversão Blink.
O IE10 oferece suporte a transformações 3D, mas não oferece suporte à transform-stylepropriedade.