transform-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
A propriedade transform-style CSS define se os elemento filhos são posicionados em um espaco 3D ou serão achatados ( flattened ) no plano do elemento
Experimente
transform-style: flat; transform-style: preserve-3d; <section class="default-example" id="default-example"> <div class="transition-all layer" id="example-element"> <p>Parent</p> <div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div> </div> </section> .layer { background: #623e3f; border-radius: 0.75rem; color: white; transform: perspective(200px) rotateY(30deg); } .numeral { background-color: #ffba08; border-radius: 0.2rem; color: #000; margin: 1rem; padding: 0.2rem; transform: rotate3d(1, 1, 1, 45deg); } Se achatados, os elementos filho não existirão por conta própria ou sozinhos no espaço 3D.
Como essa propriedade não é herdada, ela deve ser definida para todos os descendentes que não sejam folhas do elemento.
Syntax
css
/* Keyword values */ transform-style: flat; transform-style: preserve-3d; /* Valores globais */ transform-style: inherit; transform-style: initial; transform-style: unset; Values
flat-
Indica que os filhos do elemento estão no plano do próprio elemento.
preserve-3d-
Indica que os filhos do elemento devem ser posicionados no espaço 3D.
Formal syntax
transform-style =
flat |
preserve-3d
Especificações
| Specification |
|---|
| CSS Transforms Module Level 2 # transform-style-property |
| Initial value | flat |
|---|---|
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |
| Creates stacking context | yes |