Transformaciones 3D

Repaso de transformaciones 2D

Antes de trabajar con el espacio tridimensional, conviene tener claras las transformaciones 2D que Tailwind CSS proporciona de forma nativa. Estas utilidades modifican la posición, el tamaño y la orientación de los elementos dentro del plano horizontal y vertical.

Escala con scale-*

La clase scale-* modifica el tamaño de un elemento de forma proporcional. Los valores representan porcentajes donde 100 es el tamaño original:

<div class="flex items-center gap-6">
  <div class="size-20 rounded-lg bg-blue-500 scale-75">75%</div>
  <div class="size-20 rounded-lg bg-blue-500 scale-100">100%</div>
  <div class="size-20 rounded-lg bg-blue-500 scale-125">125%</div>
</div>

También es posible escalar en un solo eje con scale-x-* y scale-y-*:

<div class="size-20 rounded-lg bg-emerald-500 scale-x-150 scale-y-75">
  Estirado horizontal
</div>

Rotación con rotate-*

La clase rotate-* aplica una rotación en grados sobre el eje Z (perpendicular a la pantalla):

<div class="flex items-center gap-8 p-12">
  <div class="size-16 rounded bg-rose-500 rotate-0">0</div>
  <div class="size-16 rounded bg-rose-500 rotate-12">12</div>
  <div class="size-16 rounded bg-rose-500 rotate-45">45</div>
  <div class="size-16 rounded bg-rose-500 rotate-90">90</div>
  <div class="size-16 rounded bg-rose-500 -rotate-12">-12</div>
</div>

Los valores negativos como -rotate-12 giran el elemento en sentido contrario a las agujas del reloj.

Traslación con translate-x-* y translate-y-*

Las clases translate-x-* y translate-y-* desplazan el elemento sin alterar el flujo del documento:

<div class="size-16 rounded bg-amber-500 translate-x-4 translate-y-2">
  Desplazado 1rem a la derecha y 0.5rem hacia abajo
</div>

Sesgo con skew-*

Las clases skew-x-* y skew-y-* inclinan el elemento en el eje indicado:

<div class="flex gap-8 p-8">
  <div class="size-20 rounded bg-violet-500 skew-x-6">Sesgo X</div>
  <div class="size-20 rounded bg-violet-500 skew-y-6">Sesgo Y</div>
  <div class="size-20 rounded bg-violet-500 skew-x-12 skew-y-3">Combinado</div>
</div>

Todas las transformaciones 2D se pueden combinar libremente sobre el mismo elemento. Tailwind CSS las compone en una única propiedad transform de CSS.

Perspectiva con perspective-*

La perspectiva es la base de cualquier efecto 3D en CSS. Define la distancia virtual entre el observador y el plano del elemento, controlando la intensidad del efecto de profundidad. Un valor de perspectiva bajo produce un efecto dramático, mientras que un valor alto genera una proyección más sutil.

Tailwind CSS 4 introduce la clase perspective-* para aplicar perspectiva al contenedor cuyos hijos se transformarán en 3D:

• perspective-near: perspectiva muy corta, efecto muy pronunciado
• perspective-normal: perspectiva intermedia
• perspective-far: perspectiva lejana, efecto suave
• perspective-none: sin perspectiva
• perspective-[800px]: valor arbitrario personalizado

Comparativa de perspectivas

<div class="flex gap-12 p-8">
  <!-- Perspectiva corta: efecto dramático -->
  <div class="perspective-near">
    <div class="size-32 rounded-lg bg-sky-500 rotate-y-45 transform-3d">
      Near
    </div>
  </div>

  <!-- Perspectiva normal -->
  <div class="perspective-normal">
    <div class="size-32 rounded-lg bg-sky-500 rotate-y-45 transform-3d">
      Normal
    </div>
  </div>

  <!-- Perspectiva lejana: efecto sutil -->
  <div class="perspective-far">
    <div class="size-32 rounded-lg bg-sky-500 rotate-y-45 transform-3d">
      Far
    </div>
  </div>
</div>

La perspectiva se aplica al elemento contenedor, no al elemento que rota. Los hijos del contenedor heredan esa perspectiva y sus transformaciones 3D se renderizan en función de ella.

Rotaciones en los ejes X, Y, Z

Tailwind CSS 4 incorpora clases para rotar elementos en cada uno de los tres ejes del espacio tridimensional. A diferencia de rotate-* (que actúa sobre el eje Z), las clases rotate-x-* y rotate-y-* inclinan el elemento hacia delante/atrás y hacia los lados respectivamente.

Rotación en el eje X

La clase rotate-x-* rota el elemento alrededor del eje horizontal, como si fuera una puerta basculante:

<div class="perspective-normal mx-auto w-fit">
  <div class="size-32 rounded-lg bg-indigo-500 text-white flex items-center justify-center transform-3d rotate-x-45">
    rotate-x-45
  </div>
</div>

Rotación en el eje Y

La clase rotate-y-* rota el elemento alrededor del eje vertical, como si fuera una puerta giratoria:

<div class="perspective-normal mx-auto w-fit">
  <div class="size-32 rounded-lg bg-teal-500 text-white flex items-center justify-center transform-3d rotate-y-45">
    rotate-y-45
  </div>
</div>

Rotación en el eje Z

La clase rotate-z-* es equivalente a rotate-* y gira el elemento sobre el eje perpendicular a la pantalla:

<div class="size-32 rounded-lg bg-pink-500 rotate-z-12">
  rotate-z-12
</div>

Combinación de rotaciones

Es posible combinar rotaciones en múltiples ejes para lograr orientaciones complejas:

<div class="perspective-[600px] mx-auto w-fit">
  <div class="size-40 rounded-xl bg-gradient-to-br from-purple-500 to-pink-500 text-white flex items-center justify-center transform-3d rotate-x-12 rotate-y-25">
    Rotación combinada
  </div>
</div>

Traslación y escala en el eje Z

Para completar las transformaciones tridimensionales, Tailwind CSS 4 incluye clases para desplazar y escalar elementos a lo largo del eje Z (profundidad).

Translate-z-*

La clase translate-z-* acerca o aleja el elemento del observador. Combinada con perspectiva, el elemento parece más grande al acercarse y más pequeño al alejarse:

<div class="perspective-normal mx-auto w-fit">
  <div class="flex gap-8">
    <div class="size-24 rounded-lg bg-orange-500 transform-3d -translate-z-16 flex items-center justify-center text-white text-sm">
      Lejos
    </div>
    <div class="size-24 rounded-lg bg-orange-500 transform-3d translate-z-16 flex items-center justify-center text-white text-sm">
      Cerca
    </div>
  </div>
</div>

Scale-z-*

La clase scale-z-* escala el elemento en el eje de profundidad. Su efecto es visible cuando se combina con rotaciones 3D:

<div class="perspective-normal mx-auto w-fit">
  <div class="size-32 rounded-lg bg-cyan-500 transform-3d rotate-y-30 scale-z-150 flex items-center justify-center text-white">
    scale-z-150
  </div>
</div>

Estilos de transformación y visibilidad de caras

Dos propiedades CSS adicionales son esenciales para construir componentes 3D interactivos: transform-style y backface-visibility.

transform-style-3d y transform-style-flat

La clase transform-style-3d (equivalente a transform-style: preserve-3d) indica al navegador que los hijos del elemento deben renderizarse en el espacio 3D del padre, en lugar de aplanarse:

<!-- Los hijos se renderizan en 3D -->
<div class="transform-style-3d">
  <div class="rotate-y-45 translate-z-8">Hijo en 3D</div>
</div>

<!-- Los hijos se aplanan (comportamiento por defecto) -->
<div class="transform-style-flat">
  <div class="rotate-y-45 translate-z-8">Hijo aplanado</div>
</div>

Sin transform-style-3d en el contenedor, las transformaciones 3D de los hijos se proyectan en un plano 2D, perdiendo el efecto de profundidad real.

backface-visible y backface-hidden

La propiedad backface-visibility controla si la cara trasera de un elemento rotado es visible. La clase backface-hidden oculta esa cara, lo que resulta imprescindible para construir componentes con dos caras como tarjetas volteables:

<!-- La cara trasera es visible (por defecto) -->
<div class="backface-visible rotate-y-180 bg-blue-500 p-4 text-white">
  Visible al girar
</div>

<!-- La cara trasera queda oculta -->
<div class="backface-hidden rotate-y-180 bg-red-500 p-4 text-white">
  Oculta al girar
</div>

Ejemplo práctico: tarjeta volteable con hover

Uno de los patrones más populares con transformaciones 3D es la tarjeta flip, que muestra una cara frontal y al pasar el cursor revela la cara trasera con una animación de volteo.

<div class="perspective-[800px] mx-auto w-72">
  <div class="group relative h-48 w-full transition-transform duration-500 transform-style-3d hover:rotate-y-180">

    <!-- Cara frontal -->
    <div class="absolute inset-0 flex items-center justify-center rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 text-white backface-hidden">
      <div class="text-center">
        <h3 class="text-xl font-bold">Cara frontal</h3>
        <p class="mt-2 text-sm text-blue-200">Pasa el cursor para voltear</p>
      </div>
    </div>

    <!-- Cara trasera -->
    <div class="absolute inset-0 flex items-center justify-center rounded-xl bg-gradient-to-br from-emerald-600 to-teal-700 text-white rotate-y-180 backface-hidden">
      <div class="text-center">
        <h3 class="text-xl font-bold">Cara trasera</h3>
        <p class="mt-2 text-sm text-emerald-200">Información adicional</p>
      </div>
    </div>

  </div>
</div>

La estructura de este componente se basa en tres niveles:

• Contenedor exterior con perspective-[800px] que establece la profundidad de la escena
• Contenedor intermedio con transform-style-3d y hover:rotate-y-180 que ejecuta la rotación
• Dos caras absolutas con backface-hidden para que cada una solo sea visible cuando está orientada hacia el observador

La cara trasera lleva la clase rotate-y-180 para que esté inicialmente girada. Al hacer hover, el contenedor intermedio rota 180 grados, ocultando la frontal y revelando la trasera.

Efectos hover con transformaciones 3D

Las transformaciones 3D combinadas con variantes de estado permiten crear interacciones dinámicas que aportan profundidad a la interfaz.

Tarjeta con inclinación al hover

<div class="perspective-[1000px]">
  <div class="rounded-xl bg-white p-6 shadow-lg transition-transform duration-300 transform-3d hover:rotate-x-6 hover:rotate-y-[-6deg] hover:shadow-xl">
    <h3 class="text-lg font-semibold text-gray-800">Producto destacado</h3>
    <p class="mt-2 text-sm text-gray-600">Pasa el cursor para ver el efecto de inclinación 3D.</p>
    <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white">Ver más</button>
  </div>
</div>

Botón con efecto de pulsación 3D

<div class="perspective-[500px] w-fit">
  <button class="rounded-lg bg-gradient-to-b from-emerald-400 to-emerald-600 px-8 py-3 text-white font-semibold shadow-lg transition-transform duration-150 transform-3d hover:rotate-x-[-8deg] hover:translate-y-[-2px] active:rotate-x-6 active:translate-y-1 active:shadow-md">
    Confirmar pedido
  </button>
</div>

Este botón combina una rotación suave en el eje X con un desplazamiento vertical. En el estado active: la rotación se invierte y el botón se hunde ligeramente, simulando una pulsación física tridimensional.

Galería con efecto de profundidad

<div class="perspective-[1200px] flex justify-center gap-4 p-8">
  <img src="img1.jpg" alt="Foto 1"
    class="w-40 rounded-lg object-cover shadow-md transition-all duration-300 transform-3d hover:-translate-z-4 hover:rotate-y-[-8deg] hover:shadow-xl" />
  <img src="img2.jpg" alt="Foto 2"
    class="w-40 rounded-lg object-cover shadow-md transition-all duration-300 transform-3d hover:translate-z-8 hover:scale-105 hover:shadow-xl" />
  <img src="img3.jpg" alt="Foto 3"
    class="w-40 rounded-lg object-cover shadow-md transition-all duration-300 transform-3d hover:-translate-z-4 hover:rotate-y-8 hover:shadow-xl" />
</div>

Cada imagen responde al hover con un movimiento en el eje Z y una ligera rotación, creando la sensación de que las fotografías se despliegan hacia el usuario.