CSS

Transformaciones 2D y 3D en CSS

Aprende translate, rotate, scale, skew, perspectiva y preserve-3d para crear interacciones fluidas y composiciones visuales avanzadas.

¿Cuánto sabes de CSS?

📘 Teoría

Transformaciones 2D con intención UX

Primero comunica estado, después añade estilo.

translate se usa para microinteracciones y ajustes visuales suaves; rotate y scale son muy útiles para feedback de botones, chips y tarjetas clicables.

Evita valores extremos: una buena transformación debe ser rápida, legible y coherente con la acción del usuario.

Regla práctica: usa duraciones cortas (120ms-220ms) para hover/focus y combina transform con estados claros de color/sombra.

Microinteracción de botón usable

.btn {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 20px rgb(15 23 42 / 0.18);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

Base de 3D: perspective y preserve-3d

La perspectiva vive en el contenedor; la rotación, en el objeto.

perspective controla la profundidad percibida: cuanto menor el valor, más dramático se ve el efecto 3D.

transform-style: preserve-3d permite que los hijos mantengan su posición espacial. Sin esta propiedad, el efecto suele verse plano.

En componentes reales (tarjetas, cubos de producto, iconos), combina 3D con transiciones suaves para evitar mareo visual.

Tarjeta 3D con caras frontal y trasera

.scene {
  perspective: 1000px;
}

.card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 600ms ease;
}

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

.card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.card__back {
  transform: rotateY(180deg);
}

transform-origin: el pivote importa

Cambiar el pivote cambia el significado del movimiento.

El valor por defecto es center center. Si cambias a top left o left center, la sensación pasa de giro centrado a bisagra lateral.

Para menús desplegables suele funcionar transform-origin: top center; para paneles laterales, left center o right center.

Cuando el origen es parte de la intención visual del diseño, documéntalo en el componente para que no se rompa en refactors.

Rendimiento y accesibilidad

Animar mejor también es respetar al usuario.

Prefiere transform y opacity para animaciones frecuentes: suelen ser más fluidas porque no fuerzan reflow completo.

Evita animaciones continuas innecesarias. En interfaces densas, demasiada animación reduce claridad cognitiva.

Respeta preferencias de movimiento con media query: @media (prefers-reduced-motion: reduce) y ofrece una versión estática o con transición mínima.

Fallback para movimiento reducido

.card {
  transition: transform 260ms ease;
}

.card:hover {
  transform: translateY(-4px) scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}

1 Transformaciones 2D con intención UX 2 Base de 3D: perspective y preserve-3d 3 transform-origin: el pivote importa 4 Rendimiento y accesibilidad

🧭 Visuales clave

Transformaciones y transform-origin

Refuerza por que el orden de funciones transform cambia el resultado visual.

Aplicacion combinada de translate rotate y scale sobre un elemento.

🧪 Aprende probando

Ejemplo Demo interactiva: pivote, rotación y escala Compara cómo cambian la sensación y legibilidad según transform-origin e intensidad.

⌄

Ejemplo Demo interactiva: transformaciones 3D guiadas por scroll Explora rotaciones en X/Y, profundidad y `preserve-3d` en una demo inmersiva controlada por el desplazamiento.

⌄