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 ⁨setembro de 2015⁩.

A propriedadetransform-styleCSS 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>  <div>    <p>Parent</p>    <div><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.