Propriedade CSS transform-style - Sintaxe, Valores e Exemplos

A propriedade CSS transform-style controla se os filhos de um elemento transformado são mantidos no mesmo espaço de renderização 3D que seu pai, ou achatados no plano do pai. É ela que transforma uma pilha de caixas aninhadas com transform em uma cena 3D real, em vez de uma imagem plana.

Esta propriedade é uma das propriedades CSS3, e só tem efeito visível em elementos que são eles próprios transformados com a propriedade transform.

O que significa "contexto de renderização 3D"

Quando você rotaciona um elemento em 3D (por exemplo, transform: rotateY(50deg)), o navegador precisa decidir se os descendentes desse elemento fazem parte do mesmo mundo 3D ou simplesmente são pintados na superfície do pai como um adesivo.

flat (o padrão) achata todos os filhos no plano 2D do pai. O filho ainda pode ser transformado, mas vive em seu próprio espaço achatado — não pode "aparecer na frente" ou "ficar atrás" do pai em 3D.
preserve-3d mantém os filhos no sistema de coordenadas 3D do pai, de modo que seus valores rotateX/rotateY/translateZ são interpretados em relação ao mesmo ponto de fuga. É isso que permite construir cubos, efeitos de virada de cartão e cenas 3D em camadas.

transform-style funciona em conjunto com perspective: defina perspective no ancestral para determinar a intensidade do efeito 3D, e transform-style: preserve-3d no pai para que seus filhos realmente vivam naquele espaço 3D.

Informação

preserve-3d é sobrescrito por várias outras propriedades: aplicar overflow (diferente de visible), clip-path, filter, opacity abaixo de 1, ou mask ao mesmo elemento força um agrupamento que achata os filhos. Se a sua cena 3D de repente parecer plana, verifique se algum desses está no elemento com preserve-3d.

Informação

Para máxima compatibilidade entre navegadores, o prefixo -webkit- (Safari, Chrome e Opera mais antigos) pode ser usado junto com a propriedade sem prefixo. Os navegadores modernos suportam transform-style sem prefixo.

Valor Inicial	flat
Aplica-se a	Elementos transformáveis.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.transformStyle = "flat";

Sintaxe

Valores CSS de transform-style

transform-style: flat | preserve-3d | initial | inherit;

Exemplo da propriedade transform-style:

Exemplo de código CSS da propriedade transform-style

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element {
        position: relative;
        height: 250px;
        width: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      #element1 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #8ebf42;
        -webkit-transform: rotateY(50deg);
        -webkit-transform-style: preserve-3d;
        transform: rotateY(50deg);
        transform-style: preserve-3d;
      }
      #element2 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #1c87c9;
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div id="element">
      <div id="element1">
        Green
        <div id="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade transform-style com o valor "flat":

Exemplo da propriedade CSS transform-style com o valor flat

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        position: relative;
        height: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #cccccc;
        background-color: #eeeeee;
      }
      .element1 {
        margin: 20px;
        border: 1px dotted;
        height: 150px;
        width: 150px;
        background-color: green;
        transform: rotateX(15deg);
        transform-style: flat;
      }
      .element2 {
        margin: 20px;
        border: 1px dotted;
        height: 200px;
        width: 200px;
        background-color: lightgreen;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div class="element">
      <div class="element1">
        Green
        <div class="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
flat	Define que os filhos dos elementos não serão posicionados no espaço tridimensional. Este é o valor padrão da propriedade.
preserve-3d	Define que os filhos dos elementos serão posicionados no espaço tridimensional.
initial	Define esta propriedade com seu valor padrão.
inherit	Herda esta propriedade do elemento pai.

Quando usar

Use transform-style: preserve-3d sempre que aninhar transformações 3D e quiser que os elementos internos compartilhem uma perspectiva comum:

Virada de cartão — um cartão com face frontal e traseira: o contêiner recebe preserve-3d, e a face traseira é rotacionada com rotateY(180deg) para ficar atrás da frente.
Cubo 3D / carrossel — seis faces com translateZ e rotacionadas a partir de um centro comum.
Cenas de paralaxe em camadas — filhos empurrados para frente e para trás com translateZ sob uma perspective compartilhada.

Mantenha o padrão flat quando aplicar apenas uma única transformação com sensação 2D (escala, rotação no plano, inclinação) e não precisar de profundidade — é mais barato de renderizar e evita surpresas com as regras de achatamento mencionadas acima.

Propriedades relacionadas que valem a pena combinar com transform-style:

perspective — define o quão pronunciado é o efeito 3D.
perspective-origin — move o ponto de fuga.
transform-origin — altera o pivô de cada transformação.
backface-visibility — oculta o lado inverso de um elemento rotacionado (essencial para viradas de cartão).

Prática

A propriedade transform-style funciona apenas com a propriedade

transition.animation-name.transform.