Tutorial CSS: Transformaciones 3D

Perspectiva y profundidad en transformaciones 3D

Las transformaciones 3D en CSS nos permiten manipular elementos en un espacio tridimensional, añadiendo una nueva dimensión a nuestros diseños web. Para crear efectos 3D convincentes, necesitamos entender cómo funcionan la perspectiva y la profundidad, elementos fundamentales que determinan cómo percibimos los objetos en un espacio tridimensional.

Entendiendo la perspectiva

La perspectiva en CSS define cómo percibimos la profundidad de los elementos. Funciona estableciendo una distancia virtual entre el usuario y el plano z=0 (donde se sitúan inicialmente los elementos). Esta propiedad es esencial para crear efectos tridimensionales realistas.

Podemos aplicar perspectiva de dos maneras principales:

• 1. Usando la propiedad perspective: Se aplica al elemento contenedor.

.container {
  perspective: 1000px;
}

.box {
  transform: rotateY(45deg);
}

• 2. Como función dentro de transform: Se aplica directamente al elemento.

.box {
  transform: perspective(1000px) rotateY(45deg);
}

El valor de la perspectiva representa la distancia desde el observador al objeto. Valores más pequeños crean efectos 3D más dramáticos:

• Valores entre 500px-1000px: Efectos 3D pronunciados
• Valores superiores a 1500px: Efectos 3D más sutiles

Punto de origen de la perspectiva

Podemos controlar desde qué punto se observa el elemento 3D usando la propiedad perspective-origin:

.container {
  perspective: 1000px;
  perspective-origin: center center; /* valor por defecto */
}

Esta propiedad acepta valores como:

• Palabras clave: top, bottom, left, right, center
• Porcentajes o unidades de longitud
• Combinaciones: top left, 25% 75%, etc.

Veamos un ejemplo práctico que muestra diferentes orígenes de perspectiva:

.container {
  perspective: 800px;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  border: 1px solid #ccc;
}

.box {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  transform: rotateY(45deg);
  transition: transform 1s ease;
}

.perspective-center {
  perspective-origin: center center;
}

.perspective-top-left {
  perspective-origin: top left;
}

.perspective-bottom-right {
  perspective-origin: bottom right;
}

Profundidad y el eje Z

El eje Z es perpendicular a la pantalla, permitiéndonos mover elementos hacia o alejándolos del observador. Esto se logra principalmente mediante:

• La función translateZ()
• La propiedad transform-origin

Cuando combinamos translateZ() con la perspectiva, podemos crear efectos de profundidad realistas:

.container {
  perspective: 1000px;
}

.close {
  transform: translateZ(100px); /* Parece más cercano */
}

.far {
  transform: translateZ(-100px); /* Parece más lejano */
}

Un valor positivo de translateZ() mueve el elemento hacia el observador, mientras que un valor negativo lo aleja.

Efecto de desvanecimiento por profundidad

Podemos simular el efecto natural donde los objetos parecen más pequeños a medida que se alejan usando scale junto con translateZ:

.card {
  transform: perspective(1000px) translateZ(-100px) scale(1.1);
}

Este ajuste de escala compensa la reducción de tamaño causada por el movimiento en el eje Z, creando efectos más naturales.

Ejemplo práctico: Galería con profundidad

Veamos un ejemplo de una galería de imágenes con efecto de profundidad:

.gallery {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.image-card {
  width: 200px;
  height: 300px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.5s ease;
}

.image-card:nth-child(1) {
  transform: translateZ(-50px) rotateY(-15deg);
}

.image-card:nth-child(2) {
  transform: translateZ(0);
}

.image-card:nth-child(3) {
  transform: translateZ(-50px) rotateY(15deg);
}

.image-card:hover {
  transform: translateZ(50px) scale(1.05);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

Backface visibility

Cuando rotamos un elemento 180 grados, podemos ver su "parte trasera". La propiedad backface-visibility controla si esta cara posterior es visible:

.card {
  backface-visibility: hidden; /* oculta la cara posterior */
  transform: rotateY(180deg);
}

Esta propiedad es especialmente útil para crear efectos de tarjetas giratorias:

.card-container {
  perspective: 1000px;
  width: 300px;
  height: 200px;
  position: relative;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.8s;
}

.card-front {
  background-color: #f8f9fa;
}

.card-back {
  background-color: #e9ecef;
  transform: rotateY(180deg);
}

.card-container:hover .card-front {
  transform: rotateY(180deg);
}

.card-container:hover .card-back {
  transform: rotateY(0);
}

Consideraciones de rendimiento

Las transformaciones 3D pueden ser intensivas para el navegador, especialmente en dispositivos móviles. Algunas recomendaciones:

• Usa la propiedad will-change: transform para elementos que se animarán frecuentemente
• Limita el número de elementos con transformaciones 3D complejas
• Considera usar transform: translateZ(0) o transform: translate3d(0,0,0) para activar la aceleración por hardware

.optimized-element {
  will-change: transform;
  transform: translateZ(0); /* hack para forzar aceleración por hardware */
}

Compatibilidad entre navegadores

Aunque las transformaciones 3D tienen buen soporte en navegadores modernos, para máxima compatibilidad considera usar prefijos de proveedor en proyectos que necesiten soportar navegadores antiguos:

.container {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.box {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

Las transformaciones 3D con perspectiva adecuada pueden elevar significativamente la experiencia visual de tu sitio web, creando interfaces más inmersivas y atractivas. En las siguientes secciones exploraremos cómo aplicar rotaciones específicas y otras transformaciones 3D para crear efectos aún más sofisticados.

Rotación en 3D con rotateX, rotateY y rotateZ

Las rotaciones 3D son una parte fundamental de las transformaciones tridimensionales en CSS. Nos permiten girar elementos alrededor de los tres ejes principales del espacio: X, Y y Z. Estas rotaciones son la base para crear efectos visuales dinámicos y atractivos en nuestras páginas web.

Los tres ejes de rotación

Para entender correctamente las rotaciones 3D, primero debemos visualizar los tres ejes en el espacio:

• El eje X es horizontal (de izquierda a derecha)
• El eje Y es vertical (de arriba a abajo)
• El eje Z es perpendicular a la pantalla (hacia adelante y atrás)

CSS nos proporciona tres funciones específicas para rotar elementos alrededor de estos ejes:

.element {
  transform: rotateX(45deg);  /* Rotación alrededor del eje X */
  transform: rotateY(45deg);  /* Rotación alrededor del eje Y */
  transform: rotateZ(45deg);  /* Rotación alrededor del eje Z */
}

Rotación en el eje X (rotateX)

La función rotateX() gira un elemento alrededor de su eje X horizontal. Imagina una línea que atraviesa el elemento de izquierda a derecha, y el elemento girando alrededor de esa línea.

.box {
  transform: rotateX(45deg);
}

Este tipo de rotación crea un efecto donde la parte superior del elemento se aleja del observador y la parte inferior se acerca:

.flip-card {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.8s ease;
}

.flip-card:hover {
  transform: rotateX(180deg);
}

Rotación en el eje Y (rotateY)

La función rotateY() rota un elemento alrededor de su eje Y vertical. Visualiza una línea que atraviesa el elemento de arriba a abajo, y el elemento girando alrededor de esa línea.

.box {
  transform: rotateY(45deg);
}

Esta rotación crea un efecto donde el lado izquierdo del elemento se acerca al observador mientras el lado derecho se aleja (o viceversa, dependiendo del ángulo):

.book-cover {
  width: 150px;
  height: 200px;
  background-color: #e74c3c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}

.book-cover:hover {
  transform: rotateY(-30deg);
}

Rotación en el eje Z (rotateZ)

La función rotateZ() gira un elemento alrededor de su eje Z, que es perpendicular a la pantalla. Esta rotación es similar a la rotación 2D tradicional con la función rotate().

.box {
  transform: rotateZ(45deg);
}

De hecho, rotate() y rotateZ() producen el mismo resultado visual:

/* Estos dos son equivalentes */
.element-1 {
  transform: rotate(45deg);
}

.element-2 {
  transform: rotateZ(45deg);
}

Combinando rotaciones

Podemos combinar múltiples rotaciones en un solo elemento para crear efectos más complejos:

.cube-face {
  transform: rotateX(30deg) rotateY(45deg) rotateZ(10deg);
}

El orden de las transformaciones es importante, ya que afecta al resultado final. Las transformaciones se aplican de derecha a izquierda:

/* Estas dos transformaciones producen resultados diferentes */
.element-1 {
  transform: rotateX(45deg) rotateY(30deg);
}

.element-2 {
  transform: rotateY(30deg) rotateX(45deg);
}

Unidades de rotación

Las rotaciones en CSS pueden especificarse en varias unidades:

• Grados (deg): De 0 a 360 grados
• Radianes (rad): 2π radianes equivalen a 360 grados
• Grados graduales (grad): 400 grados graduales equivalen a 360 grados
• Vueltas (turn): 1 vuelta equivale a 360 grados

.box-deg {
  transform: rotateY(45deg);
}

.box-rad {
  transform: rotateY(0.785rad); /* Aproximadamente 45 grados */
}

.box-grad {
  transform: rotateY(50grad); /* Aproximadamente 45 grados */
}

.box-turn {
  transform: rotateY(0.125turn); /* Equivale a 45 grados */
}

Ejemplo práctico: Cubo 3D giratorio

Veamos cómo podemos crear un cubo 3D utilizando rotaciones en los diferentes ejes:

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
  margin: 100px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  color: white;
  border: 2px solid black;
}

.front {
  background: rgba(255, 0, 0, 0.7);
  transform: rotateY(0deg) translateZ(100px);
}

.back {
  background: rgba(0, 255, 0, 0.7);
  transform: rotateY(180deg) translateZ(100px);
}

.right {
  background: rgba(0, 0, 255, 0.7);
  transform: rotateY(90deg) translateZ(100px);
}

.left {
  background: rgba(255, 255, 0, 0.7);
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  background: rgba(255, 0, 255, 0.7);
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  background: rgba(0, 255, 255, 0.7);
  transform: rotateX(-90deg) translateZ(100px);
}

.scene:hover .cube {
  transform: translateZ(-100px) rotateY(45deg) rotateX(45deg);
}

Animando rotaciones 3D

Las rotaciones 3D se pueden animar para crear efectos dinámicos. Podemos usar transiciones o animaciones:

/* Con transiciones */
.card {
  transition: transform 0.8s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

/* Con animaciones */
@keyframes spin {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.spinning-element {
  animation: spin 4s linear infinite;
}

Ajustando el punto de origen

Por defecto, las rotaciones ocurren alrededor del centro del elemento. Podemos cambiar este punto de origen con la propiedad transform-origin:

.box {
  transform-origin: top left;
  transform: rotateZ(45deg);
}

Esta propiedad acepta valores como:

• Palabras clave: top, bottom, left, right, center
• Porcentajes o unidades de longitud
• Valores para los tres ejes: transform-origin: x y z

.door {
  width: 100px;
  height: 200px;
  background-color: brown;
  transform-origin: left;
  transition: transform 0.5s ease;
}

.door:hover {
  transform: rotateY(45deg);
}

Consejos para rotaciones 3D efectivas

• Usa perspectiva: Las rotaciones 3D son más efectivas cuando se combinan con la propiedad perspective.
• Considera la visibilidad posterior: Para elementos que rotan 180 grados, considera usar backface-visibility: hidden.
• Prueba diferentes ángulos: A veces, pequeñas rotaciones (15-30 grados) crean efectos más sutiles y elegantes que rotaciones completas.
• Combina con otras transformaciones: Las rotaciones funcionan bien cuando se combinan con translate y scale.

.card-3d {
  transition: transform 0.5s ease;
}

.card-3d:hover {
  transform: rotateY(15deg) rotateX(5deg) translateZ(20px) scale(1.05);
}

Las rotaciones 3D son herramientas poderosas para crear interfaces interactivas y atractivas. Experimentando con diferentes combinaciones de rotaciones en los tres ejes, puedes crear efectos visuales únicos que destaquen tu diseño web.

Transformación 3D con translate3d y scale3d

Las transformaciones 3D en CSS nos permiten manipular elementos no solo en los ejes X e Y, sino también en el eje Z, creando efectos de profundidad. Mientras que en secciones anteriores exploramos la perspectiva y las rotaciones, ahora nos centraremos en dos funciones fundamentales para el posicionamiento y dimensionamiento en el espacio tridimensional: translate3d() y scale3d().

Función translate3d()

La función translate3d() nos permite mover elementos en los tres ejes espaciales simultáneamente. Su sintaxis es:

.element {
  transform: translate3d(tx, ty, tz);
}

Donde:

• tx: Desplazamiento en el eje X (horizontal)
• ty: Desplazamiento en el eje Y (vertical)
• tz: Desplazamiento en el eje Z (profundidad)

A diferencia de usar funciones individuales (translateX(), translateY(), translateZ()), translate3d() ofrece una forma más concisa de aplicar movimientos tridimensionales y además activa la aceleración por hardware en la mayoría de navegadores.

.box {
  /* Estas dos declaraciones son equivalentes */
  transform: translateX(20px) translateY(30px) translateZ(50px);
  transform: translate3d(20px, 30px, 50px);
}

Un ejemplo práctico de uso sería crear un efecto de "flotación" al pasar el cursor:

.card {
  width: 250px;
  height: 350px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translate3d(0, -15px, 30px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Este código hace que la tarjeta se eleve ligeramente y se acerque al usuario al pasar el cursor, creando una sensación de interactividad tridimensional.

Función scale3d()

La función scale3d() nos permite cambiar el tamaño de un elemento en los tres ejes. Su sintaxis es:

.element {
  transform: scale3d(sx, sy, sz);
}

Donde:

• sx: Factor de escala en el eje X
• sy: Factor de escala en el eje Y
• sz: Factor de escala en el eje Z

Un valor de 1 mantiene la escala original, valores mayores aumentan el tamaño y valores menores lo reducen. Por ejemplo:

.grow-3d {
  transform: scale3d(1.2, 1.2, 1.5);
}

Este código aumenta el tamaño del elemento un 20% en los ejes X e Y, y un 50% en el eje Z.

Al igual que con translate3d(), scale3d() es equivalente a usar las funciones individuales:

.box {
  /* Estas dos declaraciones son equivalentes */
  transform: scaleX(1.5) scaleY(1.2) scaleZ(2);
  transform: scale3d(1.5, 1.2, 2);
}

Combinando translate3d y scale3d

La verdadera potencia de estas funciones se aprecia cuando las combinamos para crear efectos complejos:

.interactive-element {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.interactive-element:hover {
  transform: translate3d(0, -10px, 20px) scale3d(1.05, 1.05, 1.2);
}

Este código crea un efecto donde el elemento se eleva, se acerca al usuario y aumenta ligeramente su tamaño, todo en un movimiento fluido.

Ejemplo práctico: Galería de productos 3D

Veamos cómo podemos aplicar estas transformaciones para crear una galería de productos con efectos 3D:

.product-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  perspective: 1000px;
}

.product-card {
  width: 200px;
  height: 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-card img {
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.product-card .info {
  padding: 15px;
}

.product-card:hover {
  transform: translate3d(0, -15px, 40px) scale3d(1.03, 1.03, 1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

Este código crea tarjetas de producto que parecen "levantarse" del plano y acercarse al usuario cuando se pasa el cursor sobre ellas.

Optimización del rendimiento

Las transformaciones 3D pueden ser exigentes para el navegador, especialmente en dispositivos de gama baja. Algunas técnicas para optimizar el rendimiento:

• Usa will-change: transform para elementos que se transformarán frecuentemente:

.animated-element {
  will-change: transform;
}

• Aprovecha la aceleración por hardware que proporciona translate3d():

/* Incluso con valores de 0, activa la aceleración por hardware */
.hardware-accelerated {
  transform: translate3d(0, 0, 0);
}

• Limita el número de elementos con transformaciones 3D complejas en una misma página.

Creando interfaces de capas con translate3d

Una aplicación práctica de translate3d() es crear interfaces de "capas" o "niveles" que dan sensación de profundidad:

.ui-container {
  perspective: 1200px;
  position: relative;
  height: 500px;
}

.background-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg');
  transform: translate3d(0, 0, -100px);
}

.content-layer {
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 10px;
  transform: translate3d(0, 0, 0);
}

.floating-elements {
  position: absolute;
  transform: translate3d(0, 0, 50px);
}

Este código crea tres capas a diferentes profundidades, generando un efecto de paralaje estático.

Efectos de hover avanzados

Podemos crear efectos de hover más sofisticados combinando translate3d() y scale3d() con otras transformaciones:

.feature-box {
  width: 300px;
  height: 200px;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  border-radius: 8px;
  color: white;
  padding: 20px;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  position: relative;
}

.feature-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #a777e3, #6e8efb);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.feature-box:hover {
  transform: translate3d(0, -10px, 30px) scale3d(1.05, 1.05, 1) rotateX(5deg);
}

.feature-box:hover::before {
  opacity: 1;
}

Este ejemplo crea una caja que no solo se eleva y escala, sino que también rota ligeramente y cambia su gradiente de color al pasar el cursor.

Compatibilidad entre navegadores

Aunque las transformaciones 3D tienen buen soporte en navegadores modernos, para proyectos que necesiten compatibilidad con navegadores más antiguos, considera usar prefijos de proveedor:

.compatible-element {
  -webkit-transform: translate3d(10px, 20px, 30px) scale3d(1.1, 1.1, 1);
  transform: translate3d(10px, 20px, 30px) scale3d(1.1, 1.1, 1);
}

Las funciones translate3d() y scale3d() son herramientas fundamentales para crear interfaces web modernas con sensación de profundidad. Combinadas con otras transformaciones y efectos CSS, pueden elevar significativamente la experiencia de usuario de tu sitio web, añadiendo dimensionalidad e interactividad a elementos que de otro modo serían planos.

Preservación del espacio 3D con transform-style: preserve-3d

Cuando trabajamos con transformaciones 3D en CSS, uno de los mayores desafíos es mantener la relación espacial entre elementos anidados. Por defecto, CSS aplana la jerarquía de elementos transformados, lo que puede arruinar nuestros efectos tridimensionales. Aquí es donde la propiedad transform-style: preserve-3d se vuelve esencial.

El problema del aplanamiento

Por defecto, CSS utiliza un comportamiento llamado "aplanamiento" cuando aplica transformaciones 3D. Esto significa que cada elemento transformado crea su propio contexto de apilamiento independiente, ignorando el espacio 3D de su contenedor.

.parent {
  transform: rotateY(45deg);
}

.child {
  transform: rotateX(45deg);
}

Sin preserve-3d, el elemento hijo no se rotará en el mismo espacio 3D que el padre. En lugar de eso, su rotación ocurrirá en un plano 2D aplanado, como si el padre nunca hubiera sido rotado.

Habilitando el espacio 3D compartido

La propiedad transform-style tiene dos valores posibles:

.element {
  transform-style: flat; /* valor por defecto */
  /* o */
  transform-style: preserve-3d;
}

• flat: Aplana las transformaciones (comportamiento predeterminado)
• preserve-3d: Mantiene las transformaciones en un espacio 3D compartido

Cuando aplicamos preserve-3d a un elemento contenedor, todos sus hijos directos participarán en el mismo espacio tridimensional:

.container {
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}

.child {
  transform: rotateX(45deg);
}

En este ejemplo, la rotación del hijo ocurrirá dentro del espacio 3D ya rotado del padre, creando un efecto verdaderamente tridimensional.

Propagación y herencia

Es importante entender que transform-style no se hereda automáticamente. Debe aplicarse a cada elemento contenedor en la jerarquía que desees mantener en 3D:

.grandparent {
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}

.parent {
  transform-style: preserve-3d; /* Necesario repetirlo aquí */
  transform: rotateX(45deg);
}

.child {
  transform: rotateZ(15deg);
}

Sin el transform-style: preserve-3d en el elemento .parent, el elemento .child no mantendría la relación espacial 3D con el abuelo.

Ejemplo práctico: Cubo 3D anidado

Veamos un ejemplo que demuestra la importancia de preserve-3d al crear estructuras 3D complejas:

.scene {
  width: 200px;
  height: 200px;
  perspective: 800px;
  margin: 100px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Crucial para mantener las caras en 3D */
  transform: translateZ(-100px);
  transition: transform 1s;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(141, 214, 249, 0.8);
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.front { transform: rotateY(0deg) translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

/* Añadimos un elemento interno a cada cara */
.inner-element {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 105, 180, 0.8);
  transform: translateZ(20px) rotateX(45deg);
}

Sin transform-style: preserve-3d en el cubo, las caras se aplanarían y no formarían un cubo real. Además, los elementos internos no mantendrían su posición 3D relativa a las caras.

Limitaciones y consideraciones

Existen algunas limitaciones importantes al usar transform-style: preserve-3d:

• Se rompe si el elemento o cualquiera de sus ancestros tiene:
• overflow diferente a visible
• filter aplicado
• clip-path aplicado
• mask aplicado
• isolation: isolate
• mix-blend-mode diferente a normal

/* Esto romperá el efecto preserve-3d */
.container {
  transform-style: preserve-3d;
  overflow: hidden; /* ¡Problema! */
}

Estas limitaciones ocurren porque estas propiedades crean nuevos contextos de apilamiento que interrumpen el espacio 3D compartido.

Ejemplo: Carrusel 3D

Un uso común de preserve-3d es crear carruseles 3D. Veamos un ejemplo simplificado:

.carousel {
  perspective: 1000px;
  width: 300px;
  height: 200px;
  margin: 100px auto;
  position: relative;
}

.carousel-container {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.carousel-item {
  position: absolute;
  width: 280px;
  height: 180px;
  background-color: #f8f9fa;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  backface-visibility: hidden;
}

/* Posicionamos los elementos en un círculo 3D */
.carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(250px); }
.carousel-item:nth-child(2) { transform: rotateY(72deg) translateZ(250px); }
.carousel-item:nth-child(3) { transform: rotateY(144deg) translateZ(250px); }
.carousel-item:nth-child(4) { transform: rotateY(216deg) translateZ(250px); }
.carousel-item:nth-child(5) { transform: rotateY(288deg) translateZ(250px); }

/* Rotación del contenedor para mostrar diferentes elementos */
.carousel-container.show-1 { transform: rotateY(0deg); }
.carousel-container.show-2 { transform: rotateY(-72deg); }
.carousel-container.show-3 { transform: rotateY(-144deg); }
.carousel-container.show-4 { transform: rotateY(-216deg); }
.carousel-container.show-5 { transform: rotateY(-288deg); }

Sin transform-style: preserve-3d en el contenedor del carrusel, los elementos no mantendrían su posición circular en el espacio 3D.

Combinación con otras propiedades 3D

Para crear efectos 3D realmente impresionantes, transform-style: preserve-3d debe combinarse con otras propiedades:

.flip-book {
  perspective: 1200px;
  width: 400px;
  height: 300px;
  margin: 50px auto;
}

.book {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.2s;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transition: transform 1.2s;
  transform-style: preserve-3d; /* Importante para elementos anidados */
  background-color: #fff;
  border: 1px solid #ddd;
}

.page-front, .page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  padding: 20px;
}

.page-back {
  transform: rotateY(180deg);
}

/* Efecto de voltear página */
.page:hover {
  transform: rotateY(-160deg);
}

Este ejemplo simula un libro con páginas que se pueden voltear. Sin preserve-3d, las páginas no mantendrían su relación espacial con el libro.

Compatibilidad entre navegadores

La propiedad transform-style: preserve-3d tiene buen soporte en navegadores modernos, pero para máxima compatibilidad:

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

Rendimiento y optimización

Las transformaciones 3D con preserve-3d pueden ser intensivas para el navegador, especialmente con estructuras complejas. Algunas recomendaciones:

• Limita el número de elementos con transformaciones 3D anidadas
• Usa will-change: transform para elementos que se animarán
• Considera aplicar backface-visibility: hidden para elementos que no necesitan mostrar su parte trasera

.optimized-3d-element {
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

La propiedad transform-style: preserve-3d es fundamental para crear estructuras 3D complejas en CSS. Sin ella, nuestros elementos transformados existirían en planos independientes, perdiendo la cohesión espacial necesaria para efectos tridimensionales convincentes. Dominar esta propiedad, junto con sus limitaciones, te permitirá crear experiencias web inmersivas y visualmente impactantes.