Propiedad CSS transform-style - Sintaxis, Valores y Ejemplos

La propiedad CSS transform-style controla si los hijos de un elemento transformado se mantienen en el mismo espacio de renderizado 3D que su padre, o si se aplanan en el plano del padre. Es lo que convierte una pila de cajas transformadas anidadas en una verdadera escena 3D en lugar de una imagen plana.

Esta propiedad es una de las propiedades CSS3, y solo tiene un efecto visible en elementos que están transformados con la propiedad transform.

Qué significa "contexto de renderizado 3D"

Cuando se rota un elemento en 3D (por ejemplo, transform: rotateY(50deg)), el navegador tiene que decidir si los descendientes de ese elemento son parte del mismo mundo 3D o simplemente pintados sobre la superficie del padre como una pegatina.

flat (el valor por defecto) aplana todos los hijos en el plano 2D del padre. El hijo puede seguir transformándose, pero vive en su propio espacio aplanado — no puede sobresalir "por delante" ni quedar "por detrás" de su padre en 3D.
preserve-3d mantiene los hijos en el sistema de coordenadas 3D del padre, por lo que sus valores rotateX/rotateY/translateZ se interpretan en relación con el mismo punto de fuga. Esto es lo que permite construir cubos, efectos de volteo de tarjetas y escenas 3D en capas.

transform-style funciona en conjunto con perspective: establece perspective en el ancestro para definir la intensidad del efecto 3D, y transform-style: preserve-3d en el padre para que sus hijos vivan realmente en ese espacio 3D.

Información

preserve-3d es anulado por varias otras propiedades: aplicar overflow (distinto de visible), clip-path, filter, opacity por debajo de 1, o mask al mismo elemento fuerza una agrupación que aplana los hijos. Si tu escena 3D de repente parece plana, comprueba si alguna de estas propiedades está presente en el elemento preserve-3d.

Información

Para máxima compatibilidad con navegadores, el prefijo -webkit- (Safari, versiones antiguas de Chrome y Opera) puede usarse junto con la propiedad sin prefijo. Los navegadores modernos admiten transform-style sin prefijo.

Valor inicial	flat
Se aplica a	Elementos transformables.
Heredado	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.transformStyle = "flat";

Sintaxis

Valores de CSS transform-style

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

Ejemplo de la propiedad transform-style:

Ejemplo de código CSS 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>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad transform-style con el valor "flat":

Ejemplo de la propiedad CSS transform-style con el 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>

Pruébalo tú mismo »

Valores

Valor	Descripción
flat	Define que los hijos del elemento no serán posicionados en el espacio tridimensional. Este es el valor por defecto de esta propiedad.
preserve-3d	Define que los hijos del elemento serán posicionados en el espacio tridimensional.
initial	Establece esta propiedad a su valor por defecto.
inherit	Hereda esta propiedad de su elemento padre.

Cuándo usarla

Recurre a transform-style: preserve-3d siempre que anides transformaciones 3D y quieras que los elementos internos compartan una perspectiva:

Volteo de tarjeta — una tarjeta con cara frontal y trasera: el contenedor recibe preserve-3d, y la cara trasera se rota con rotateY(180deg) para que quede detrás de la frontal.
Cubo 3D / carrusel — seis caras con translateZ y rotadas desde un centro común.
Escenas de paralaje en capas — hijos desplazados hacia adelante y atrás con translateZ bajo una perspective compartida.

Mantén el valor por defecto flat cuando solo apliques una única transformación de aspecto 2D (escala, rotación en el plano, sesgo) y no necesites profundidad — es más económico de renderizar y evita sorpresas por las reglas de aplanamiento mencionadas anteriormente.

Propiedades relacionadas que conviene combinar con transform-style:

perspective — define qué tan pronunciado es el efecto 3D.
perspective-origin — mueve el punto de fuga.
transform-origin — cambia el pivote de cada transformación.
backface-visibility — oculta el reverso de un elemento rotado (esencial para los volteos de tarjeta).

Práctica

La propiedad transform-style solo funciona con la propiedad

transition.animation-name.transform.