preserve-3d y backface-visibility: la escena que se aplana

El valor inicial de transform-style es flat, y esa palabra significa algo muy concreto: los descendientes de un elemento se proyectan sobre el plano de ese elemento antes de seguir subiendo. Un cubo cuyas caras son nietos y no hijos, sin preserve-3d en el intermedio, no es un cubo: son seis rectángulos pegados a una superficie. Esta lección trata de la propiedad que propaga el espacio tridimensional, de la larga lista de cosas que lo destruyen sin avisar, y de backface-visibility, que decide si ves la parte de atrás de una cara que te da la espalda.

Aplanar frente a propagar

Cuando un elemento tiene descendientes transformados en 3D, el motor tiene que decidir qué hacer con esa profundidad al componer. Con transform-style: flat —el valor inicial— renderiza el subárbol en una superficie plana y luego coloca esa superficie según la transformación del elemento. Las coordenadas z de los descendientes se pierden en el proceso: dejan de existir como profundidad y se convierten en simple orden de pintado.

Con transform-style: preserve-3d, el elemento no crea esa superficie intermedia. Sus hijos participan en el mismo espacio tridimensional que él, con sus coordenadas z intactas, y el motor los ordena por profundidad real y no por orden de documento. Esto último es lo que hace posible un cubo: la cara de atrás queda detrás de la de delante porque su z lo dice, no porque tú hayas puesto un z-index.

.escena  { perspective: 900px; }
.cuerpo  { transform-style: preserve-3d; rotate: y 30deg; }
.cuerpo .cara { position: absolute; inset: 0; }
.cuerpo .frontal { transform: translateZ(100px); }
.cuerpo .trasera { transform: rotateY(180deg) translateZ(100px); }

La cadena tiene tres piezas y hace falta que estén las tres: alguien pone la cámara —perspective—, alguien propaga el espacio —preserve-3d—, y las caras se colocan con transformaciones que incluyen una componente z. Si falta cualquiera de las tres, el resultado se ve mal de una forma distinta, y saber cuál falta a partir del síntoma es lo que separa depurar de probar cosas.

Lo que destruye un contexto 3D sin decírtelo

Aquí está la parte que hace perder tardes. transform-style: preserve-3d se ignora forzosamente cuando el elemento tiene ciertas propiedades que obligan al motor a componer su subárbol como una imagen plana. La especificación las llama propiedades de agrupamiento, y son las que crean un grupo de composición que no puede tener profundidad interna.

• overflow con cualquier valor distinto de visible, incluido hidden, auto, scroll y clip.
• opacity menor que 1.
• filter con cualquier valor distinto de none.
• backdrop-filter con cualquier valor distinto de none.
• clip-path con cualquier valor distinto de none.
• mask, mask-image, mask-border con valor distinto del inicial.
• mix-blend-mode con cualquier valor distinto de normal.
• isolation: isolate.
• contain: paint, y por tanto también contain: content y contain: strict.

La lista se solapa casi por completo con la de las propiedades que crean un contexto de apilamiento, y no es casualidad: son las que fuerzan al motor a materializar el subárbol en una superficie propia antes de componerlo. Una superficie no tiene profundidad interna.

El caso más frecuente con diferencia es overflow: hidden puesto para redondear esquinas o recortar una imagen. El elemento sigue teniendo transform-style: preserve-3d en su hoja de estilos, DevTools sigue mostrándolo aplicado, y sin embargo el cubo está aplastado. El valor computado sí cambia: si inspeccionas transform-style en el panel de valores computados verás flat, y esa es la prueba definitiva.

flowchart TB
A[El efecto 3D se ve plano] --> B{El ancestro tiene perspective}
B -->|No| C[Falta la camara]
B -->|Si| D{El intermedio tiene preserve-3d declarado}
D -->|No| E[Falta la propagacion]
D -->|Si| F{El valor computado sigue siendo preserve-3d}
F -->|No| G[Alguna propiedad de agrupamiento lo ha forzado a flat]
G --> H[Busca overflow opacity filter clip-path mask blend o contain]
F -->|Si| I{Las caras tienen componente en z}
I -->|No| J[Estan todas en el mismo plano]
I -->|Si| K[La escena es correcta]
style A fill:#f38ba8,color:#11111b
style C fill:#f9e2af,color:#11111b
style E fill:#f9e2af,color:#11111b
style H fill:#f9e2af,color:#11111b
style J fill:#f9e2af,color:#11111b
style K fill:#a6e3a1,color:#11111b

backface-visibility y la tarjeta que se voltea

Cuando una cara gira más de 90 grados, lo que ves es su reverso. Por defecto el reverso se pinta: es el mismo contenido en espejo. backface-visibility: hidden hace que el elemento desaparezca cuando su normal apunta en dirección contraria al observador.

La tarjeta de dos caras es el ejercicio canónico y se resuelve sin ningún truco de opacidad:

<div class="escena">
  <div class="tarjeta">
    <div class="cara anverso">Anverso</div>
    <div class="cara reverso">Reverso</div>
  </div>
</div>

.escena { perspective: 1000px; }

.tarjeta {
  position: relative;
  inline-size: 18rem;
  block-size: 24rem;
  transform-style: preserve-3d;
  transition: rotate .6s;
}

.escena:hover .tarjeta,
.escena:focus-within .tarjeta { rotate: y 180deg; }

.cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: grid;
  place-items: center;
}

.reverso { rotate: y 180deg; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta { transition-duration: 1ms; }
}

Lo que hace que funcione: las dos caras están superpuestas en el mismo sitio, el reverso está girado media vuelta de fábrica, y backface-visibility: hidden garantiza que en cada instante solo una de las dos mira al observador. Sin esa propiedad verías las dos a la vez, la de delante tapando a la de atrás por orden de pintado, y al girar aparecería el texto en espejo.

Ojo con la tentación de redondear las esquinas de .tarjeta con overflow: hidden: eso mata el preserve-3d y la tarjeta deja de voltear. Redondea las caras individualmente con border-radius, que no aplana nada.