Transformaciones en CSS: cómo funciona la propiedad transform

La propiedad transform de CSS ofrece numerosas posibilidades para la creación de interfaces interactivas. Permite rotar elementos, modificar su tamaño, desplazarlos por la página y generar efectos visuales de alto impacto sin necesidad de recurrir a JavaScript.

Las transformaciones CSS se han consolidado como un pilar del diseño web moderno, facilitando la implementación de animaciones fluidas, componentes adaptativos e interfaces de usuario dinámicas.

¿Qué son las transformaciones CSS y para qué sirve transform?

En esencia, la propiedad transform de CSS permite modificar la representación visual de un elemento sin alterar su posición en el flujo del documento. Su propósito es aplicar efectos como rotar, escalar, desplazar o inclinar componentes directamente desde la hoja de estilos, mejorando la interactividad y el rendimiento.

La principal ventaja de esta herramienta es que opera sobre un elemento ya renderizado: no necesitas modificar la estructura HTML, cargar nuevas imágenes ni incorporar bloques adicionales. Todas las operaciones son transformaciones visuales que se ejecutan directamente en el navegador y se controlan de forma sencilla desde CSS.

La propiedad transform no altera el objeto en el código, sino únicamente su representación visual. El elemento conserva su posición original en el flujo del documento, pero visualmente puede ubicarse en cualquier otro lugar que especifiques.

Esta propiedad funciona mediante funciones de transformación en CSS. Cada una es responsable de un tipo de modificación:

• rotate(): rota un elemento.
• scale(): modifica su tamaño.
• translate(): lo desplaza en la página.
• skew(): lo inclina.

Existen también capacidades avanzadas, como la combinación de múltiples funciones, el uso de matrices de transformación y la aplicación de efectos 3D.

En las interfaces contemporáneas, las transformaciones se emplean en una gran variedad de contextos: para animar botones al pasar el cursor, para la aparición progresiva de bloques, para la creación de carruseles 3D, entre otros.

En muchos casos, permiten prescindir de JavaScript, y los navegadores procesan estos efectos en la GPU (Unidad de Procesamiento Gráfico), lo que garantiza un rendimiento rápido y fluido, incluso en dispositivos móviles.

Cómo funcionan las transformaciones en el navegador

El mecanismo de la propiedad transform difiere del de la mayoría de las propiedades CSS. Una vez que el navegador ha renderizado un elemento con todos sus estilos y contenido, lo sitúa en una capa de composición independiente.

A partir de ese momento, las transformaciones no se aplican al elemento en el DOM, sino a esta “instantánea” visual. En términos simples, el navegador toma una imagen renderizada del objeto y la rota, desplaza, inclina o estira.

La diferencia fundamental es que las transformaciones no afectan al flujo del documento. Si, por ejemplo, rotas una imagen 45 grados, todos los bloques adyacentes permanecerán en sus posiciones originales, como si la imagen todavía ocupara su espacio inicial.

Todas las transformaciones se realizan en relación con un punto de referencia denominado origen de la transformación, o transform-origin.

Por defecto, este punto se encuentra en el centro del elemento, pero puede desplazarse a cualquier esquina o asignársele coordenadas precisas. Al modificar este punto, es posible obtener distintos efectos visuales, como una rotación desde una esquina en lugar del centro.

Existe otro aspecto a considerar. En cuanto se aplica un transform a un elemento, este adquiere un comportamiento particular: se crea un nuevo contexto de apilamiento para sus elementos anidados.

Esto significa que dichos elementos se organizarán en el eje Z únicamente dentro de los límites de su contenedor y no podrán superponerse a otros elementos externos basándose en su z-index.

En esencia, las transformaciones CSS operan en la fase final del renderizado, cuando la página ya está construida. Esto permite modificar la apariencia de los elementos sin forzar un recalculo del layout, lo que se traduce en efectos rápidos y fluidos.

Sintaxis de la propiedad transform

La propiedad transform se define mediante una o más funciones con sus respectivos parámetros entre paréntesis. La sintaxis básica es la siguiente:

.element {
    transform: función(valor);
}

Por ejemplo:

.element {
    transform: scale(1.2);
}

En este caso, el elemento se ampliará en un 20%. Si no se especifica ningún valor, la propiedad adopta su valor por defecto, none, lo que significa que no se aplicará ninguna transformación.

Es común utilizar varias funciones simultáneamente. En tal caso, se escriben separadas por un espacio:

.element {
  transform: rotate(45deg) scale(1.5) translate(20px, 30px);
}

El navegador ejecuta las funciones en orden de derecha a izquierda. En el ejemplo anterior, el elemento primero se desplazará, luego se escalará y, finalmente, se rotará.

Para asegurar el correcto funcionamiento del código, es importante respetar la sintaxis:

• Las funciones se separan por espacios: rotate(45deg) scale(1.5);.
• Los valores decimales utilizan un punto: scale(1.5);.
• En translate(), las coordenadas se separan por una coma: translate(20px, 30px);.

La propiedad también admite los valores globales de CSS:

• inherit: hereda el valor del elemento padre.
• initial: restablece el valor al predeterminado.
• unset: anula la configuración y restaura el comportamiento base.

Función translate(): desplazamiento de elementos

La función translate() desplaza un elemento desde su posición original. El flujo del documento no se ve afectado: los elementos adyacentes se comportan como si el elemento no se hubiera movido.

Ejemplo básico:

.translate-element {
  transform: translate(50px, 100px);
}

El primer valor corresponde al desplazamiento horizontal (eje X) y el segundo, al vertical (eje Y). Los números positivos mueven el elemento hacia la derecha y hacia abajo, mientras que los negativos lo mueven hacia la izquierda y hacia arriba.

Si solo se necesita desplazar el objeto en un eje, se pueden utilizar las funciones específicas:

.translate {
  transform: translateX(30px);  /* Solo horizontal */
  transform: translateY(-20px); /* Solo vertical */
}

translate() también acepta valores porcentuales. En este caso, el desplazamiento se calcula en relación con las dimensiones del propio elemento. Esta técnica se utiliza frecuentemente para centrar elementos:

.center-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

De esta manera, el elemento queda perfectamente centrado en su contenedor: primero, su esquina superior izquierda se posiciona en el centro, y luego el bloque se desplaza hacia atrás en un 50% de su propia anchura y altura.

A continuación, un ejemplo del popular efecto de “elevación” de una tarjeta al pasar el cursor:

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

Función rotate(): rotación de elementos

La función rotate() gira un elemento alrededor de su punto de origen según un ángulo especificado. Los valores positivos rotan el elemento en el sentido de las agujas del reloj, mientras que los negativos lo hacen en sentido contrario.

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

Los ángulos pueden especificarse en diferentes unidades:

• deg (grados): de 0deg a 360deg para una rotación completa.
• rad (radianes): $$2\pi$$ rad (aprox. 6.283rad) equivalen a una rotación completa.
• grad (gradianes): 400grad equivalen a una rotación completa.
• turn (vueltas): 1turn equivale a una rotación completa.

.different-units {
    /* Todas estas declaraciones son equivalentes */
    transform: rotate(90deg);
    transform: rotate(1.5708rad);  
    transform: rotate(100grad);
    transform: rotate(0.25turn);
}

Ejemplo práctico de rotate CSS en un icono al pasar el cursor:

See the Pen rotate CSS by Alex (@htmldesdecero) on CodePen.

HTML

<a href="#" class="menu-icon">≡</a>

CSS

.menu-icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 40px;
  line-height: 50px;
  color: #333;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #333;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.menu-icon:hover {
  transform: rotate(180deg);
}

Para una rotación continua, rotate() se combina con animaciones CSS. Por ejemplo, así se puede crear un indicador de carga:

See the Pen Indicador de carga by Alex (@htmldesdecero) on CodePen.

HTML

<div class="spinner-container">
  <div class="loading-spinner"></div>
  <p>Cargando...</p>
</div>

CSS

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-container {
  text-align: center;
}

.spinner-container p {
  margin-top: 20px;
  color: #555;
}

Función scale(): escalado de elementos

La función scale() aumenta o disminuye el tamaño de un elemento. Un valor de 1 representa el tamaño original, un valor mayor que 1 lo aumenta, y un valor menor que 1 lo reduce.

.scale-element {
    transform: scale(1.5); /* Aumento de 1.5 veces */
}

Se puede especificar uno o dos valores. Un solo número escala el elemento de manera uniforme en ambos ejes, mientras que dos números lo escalan de forma independiente en anchura y altura:

.scale {
    transform: scale(2);      /* Escalado uniforme */
    transform: scale(2, 0.5); /* 2x en el eje X, 0.5x en el eje Y */
}

Para un ajuste preciso, se utilizan las funciones scaleX() y scaleY():

.axis-scaling {
    transform: scaleX(2);   /* Solo en anchura */
    transform: scaleY(0.8); /* Solo en altura */ 
}

A continuación, un botón que se agranda al pasar el cursor sobre él:

HTML

<button class="button" type="button">Púlsame</button>

CSS

.button {  
  padding: 12px 24px;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  background: #3498db;
  border: none;
  border-radius: 4px;
  outline: none;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.button:hover {
    transform: scale(1.05);
}

Junto con el elemento, se escala todo su contenido: texto, bordes y rellenos internos. Por lo tanto, un escalado excesivo con scale CSS puede distorsionar su apariencia.

Función skew(): inclinación de un elemento

La función skew() inclina un elemento, creando un efecto de perspectiva o distorsión. El elemento se deforma a lo largo de uno o ambos ejes, conservando su área.

.skew-element {
    transform: skew(20deg, 10deg);
}

El primer parámetro define la inclinación en el eje X, y el segundo en el eje Y. Para inclinar en un solo eje, se utilizan funciones específicas:

.axis-skew {
    transform: skewX(15deg);  /* Inclinación horizontal */
    transform: skewY(-10deg); /* Inclinación vertical */
}

skew() se aplica a menudo para crear elementos de interfaz con un estilo particular:

.diagonal-button {
  padding: 15px 25px;
  color: #ffffff;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  border: none;
  transition: transform 0.2s ease;
  transform: skewX(-10deg);
}

.diagonal-button:hover {
  transform: skewX(-5deg) scale(1.05);
}

Función matrix(): transformaciones matriciales

La función matrix() unifica todas las transformaciones CSS 2D posibles en una única operación matemática. Acepta seis parámetros que describen la matriz de transformación.

.matrix-element {
    transform: matrix(1, 0, 0, 1, 50, 100);
}

Esta declaración significa que el elemento no se escala ni se inclina, pero se desplaza 50 píxeles en el eje X y 100 píxeles en el eje Y.

Los parámetros de la función matrix() se corresponden con:

• scaleX(): escalado horizontal.
• skewY(): inclinación vertical.
• skewX(): inclinación horizontal.
• scaleY(): escalado vertical.
• translateX(): desplazamiento horizontal.
• translateY(): desplazamiento vertical.

Por ejemplo, la siguiente matriz produce el mismo efecto que una rotación de 45 grados:

.rotate-matrix {
  transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
}

En la práctica, rara vez es necesario escribir estos valores manualmente; el navegador convierte internamente las funciones rotate(), scale() o translate() a su forma matricial. Sin embargo, comprender este principio puede ser útil al trabajar con gráficos, animaciones complejas o librerías que operan directamente con matrices. Para más detalles técnicos, puedes consultar la documentación de matrix() en MDN.

Para efectos tridimensionales, se utiliza una versión extendida: matrix3d(). Esta función acepta 16 parámetros y describe transformaciones en un espacio 3D.

.matrix-3d {
  transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);
}

Existen librerías de JavaScript que simplifican la conversión de funciones transform a formato matricial. Aunque se pueden utilizar si es necesario, el soporte nativo de los navegadores modernos para el transform CSS es tan robusto que las funciones básicas son suficientes para la mayoría de las tareas cotidianas.

Transformaciones 3D

Las transformaciones 3D añaden profundidad y volumen a las interfaces web. Operan en un espacio tridimensional con ejes X, Y y Z, donde el eje Z se proyecta desde la pantalla hacia el espectador.

Funciones 3D principales:

.element-3d {
    transform: translateZ(50px);     /* Desplazamiento en Z */
    transform: rotateX(45deg);       /* Rotación sobre el eje X */
    transform: rotateY(45deg);       /* Rotación sobre el eje Y */  
    transform: rotateZ(45deg);       /* Rotación sobre el eje Z */
    transform: scaleZ(1.5);          /* Escalado en Z */
}

rotateX() inclina el elemento hacia adelante o hacia atrás, como si se balanceara verticalmente. rotateY() lo gira hacia la izquierda o derecha, similar a abrir una puerta.

Para que los efectos 3D resulten realistas, es necesario definir una perspectiva. Esto crea una sensación de profundidad: los objetos lejanos parecen más pequeños y se desplazan hacia el centro. En CSS, esto se logra con la propiedad perspective, que generalmente se aplica al elemento padre.

Se aplica al contenedor padre porque este define el punto de vista desde el cual el espectador observa la escena 3D. Si perspective se aplicara directamente al elemento transformado, el efecto se limitaría a ese elemento y podría parecer poco natural durante una animación o rotación.

Cuando se establece perspective en el contenedor padre, este actúa como una cámara. Todos los elementos hijos percibirán el espacio de manera uniforme, lo que resulta en una representación visual coherente y realista.

HTML

<div class="card-container">
  <div class="card">
    <p class="card-face front">Cara frontal</p>
    <p class="card-face back">Cara posterior</p>
  </div>
</div>

CSS

/* El contenedor define la perspectiva — cómo la "cámara" ve la escena */
.card-container {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* Clave: crea el espacio 3D */
  margin: 50px auto;
}

/* La tarjeta que rota en 3D */
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Conserva el contexto 3D para los hijos */
  transition: transform 0.8s ease;
  border-radius: 10px;
}

/* Al pasar el cursor, se rota la tarjeta */
.card-container:hover .card {
  transform: rotateY(180deg);
}

/* Caras frontal y posterior */
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Oculta la cara no visible */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 10px;
}

.front {
  background-color: #3498db;
}

.back {
  background-color: #e74c3c;
  transform: rotateY(180deg); /* La cara posterior está inicialmente girada */
}

Combinando Múltiples Funciones de transform

El verdadero potencial del transform CSS se manifiesta al combinar diferentes funciones. Un elemento puede ser desplazado, rotado y escalado simultáneamente en una sola línea de código.

.combined-transform {
    transform: rotate(45deg) scale(1.5) translate(20px, 30px);
    /* Orden de aplicación: translate → scale → rotate */
}

Alterar el orden de las funciones produce resultados distintos:

/* Orden de ejecución: 1. rotate, 2. translate */
.version-a {
    transform: translate(100px, 0) rotate(45deg);
}

Aquí, primero se aplicará la rotación y, solo después, el desplazamiento. El orden es crucial, ya que el navegador ejecuta las funciones de derecha a izquierda. Si se invierte el orden, el resultado cambia:

/* Orden de ejecución: 1. translate, 2. rotate */
.version-b {
    transform: rotate(45deg) translate(100px, 0);
}

En el primer caso (.version-a), el elemento se desplazará a lo largo del nuevo eje rotado a 45 grados. En el segundo (.version-b), el elemento primero se desplazará horizontalmente y luego rotará sobre su propio centro en esa nueva posición.

En la práctica, esta técnica se usa para crear microinteracciones dinámicas. Por ejemplo, una tarjeta de producto puede elevarse, inclinarse y ampliarse ligeramente al pasar el cursor sobre ella:

Implementemos este efecto:

HTML

<div class="product-card">
  <div class="product-image">👟</div>
  <h3 class="title">Zapatillas "SkyWalk"</h3>
  <p class="text">Ligeras, con estilo, amortiguación y ventilación.</p>
  <div class="price">desde 89.90 €</div>
</div>

CSS

.product-card {
  width: 280px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  /* Se define el punto de transformación en la base de la tarjeta */
  transform-origin: center bottom;
  /* Se añade una transición suave para transform */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.product-card:hover {
  /* Combinación de transformaciones:
     - elevación hacia arriba;
     - ligera inclinación en el eje X (efecto 3D);
     - pequeño aumento de tamaño */
  transform: translateY(-20px) rotateX(5deg) scale(1.02);
  /* Se intensifica la sombra al elevarse */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  margin-bottom: 15px;
  font-size: 24px;
  color: #ffffff;
  background: linear-gradient(45deg, #74b9ff, #00b894);
  border-radius: 8px;
}

.title {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 20px;
  color: #2d3436;
}

.text {
  font-size: 14px;
  line-height: 16px;
  color: #636e72;
}

.price {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #2d3436;
}

El punto de transformación: la propiedad transform-origin

Por defecto, todas las transformaciones se realizan con respecto al centro del elemento. Sin embargo, en ocasiones es necesario que rote desde una esquina, se desplace desde un borde o se escale desde un punto específico. Para ello se utiliza la propiedad transform-origin.

Ejemplo:

.element {
  transform: rotate(45deg);
  transform-origin: top left; /* Rotación desde la esquina superior izquierda */
}

La propiedad acepta dos valores: uno para el eje horizontal y otro para el vertical. Se pueden definir mediante palabras clave (top, bottom, left, right, center) o unidades de medida (px, %).

.origin-example {
  transform: scale(1.5);
  transform-origin: 0% 100%; /* Esquina inferior izquierda */
}

En este caso, el elemento se ampliará tomando como punto de origen su borde inferior.

Para un ajuste más preciso, se puede añadir un tercer valor para el eje Z, que define la profundidad. Es especialmente útil en escenas tridimensionales para desplazar el punto de rotación hacia adelante o hacia atrás:

.card {
  transform: rotateY(45deg);
  transform-origin: center center -50px;
}

transform en animaciones y transiciones

Las transformaciones se utilizan frecuentemente en animaciones. Su principal ventaja es que se ejecutan de forma rápida y fluida: el navegador procesa estos cambios en la GPU, en lugar de recalcular todo el layout de la página. Por ello, transform es uno de los métodos más eficientes para dinamizar una interfaz.

Para crear transiciones suaves, basta con la propiedad transition. Por ejemplo, en este caso, el botón aumenta ligeramente de tamaño al pasar el cursor:

.button {
  padding: 12px 24px;
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
}

Para crear animaciones más naturales, se pueden utilizar funciones de temporización (curvas de aceleración). Es posible que diferentes propiedades requieran distintas funciones para lograr un movimiento natural del elemento.

Rendimiento y optimización

Las transformaciones son uno de los métodos más performantes para modificar elementos en el navegador, ya que operan sobre un elemento ya renderizado en lugar de reconstruir toda la página. Como resultado, los efectos con transform CSS suelen ser fluidos y no sobrecargan el dispositivo. Para saber más, puedes consultar esta guía sobre optimización de código.

No obstante, hay varias consideraciones a tener en cuenta:

• translate() vs. top/left: Los desplazamientos con translate() son más rápidos que los realizados con las propiedades top o left. Para mover elementos, es preferible usar transform.
• Indicar cambios con will-change: Si un elemento se anima con frecuencia, se le puede indicar al navegador qué propiedad va a cambiar:
  css .animated { will-change: transform; }
  Así, el navegador preparará una capa de composición dedicada, lo que mejorará la fluidez de la animación. Sin embargo, no se debe abusar de esta propiedad, ya que la creación de capas adicionales también consume recursos.
• Controlar el número de animaciones: Una página puede gestionar sin problemas varios efectos fluidos, pero animar decenas de elementos simultáneamente puede causar retardos.
• Precaución con los efectos 3D: La perspectiva y las rotaciones complejas son visualmente atractivas, pero siempre suponen una carga mayor para el procesador que las transformaciones 2D simples.

Consejos prácticos y recomendaciones

Combina transformaciones con otras propiedades

transform puede combinarse con opacity y filter para crear efectos más expresivos. Puedes ver algunos trucos de CSS para efectos visuales para inspirarte.

.card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  opacity: 0.8; /* La tarjeta se vuelve ligeramente transparente */
}

Al pasar el cursor, la tarjeta se amplía ligeramente y se vuelve semitransparente.

Centra elementos con translate()

Uno de los métodos más fiables para alinear un elemento en el centro de su contenedor es combinar un desplazamiento del 50% con translate(-50%, -50%).

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Con esta técnica, la ventana modal siempre estará centrada, independientemente de sus dimensiones.

Verifica las áreas de clic

El área de clic se desplaza junto con el elemento transformado. Sin embargo, con el escalado y la rotación, la percepción del área puede cambiar, por lo que se recomienda probar estos efectos.

.icon {
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: rotate(20deg) scale(1.2);
}

El icono se amplía y rota, pero sigue siendo clicable dentro de su nueva posición.

Utiliza microanimaciones

Incluso un efecto simple al pasar el cursor ayuda al usuario a percibir que la página responde a sus acciones.

.link {
  display: inline-block;
  transition: transform 0.2s ease;
}

.link:hover {
  transform: translateY(-2px); /* Un ligero "salto" del enlace */
}

Evalúa cuándo es mejor usar JavaScript

CSS es adecuado para la mayoría de las animaciones, pero si necesitas simular físicas complejas o mover decenas de objetos simultáneamente, es más conveniente utilizar librerías de JavaScript como GSAP.

gsap.to(".ball", { x: 200, y: 100, duration: 1, ease: "bounce.out" });

En este ejemplo, una pelota rebota con un efecto de amortiguación. Configurar este comportamiento solo con CSS sería considerablemente más complejo.

Ejemplos de uso real

Menú de hamburguesa móvil

La animación de un menú de hamburguesa es uno de los efectos más reconocibles en la web. Se utiliza transform para convertir el icono en una cruz y transition para que la animación sea fluida y natural.

HTML

<div class="menu-toggle" id="menuToggle">
  <span class="menu-line"></span>
  <span class="menu-line"></span>
  <span class="menu-line"></span>
</div>

CSS

/* Contenedor principal del icono */
.menu-toggle {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

/* Líneas de la hamburguesa */
.menu-line {
  position: absolute;
  height: 2px;
  width: 100%;
  background: #333;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Posición de las líneas */
.menu-line:nth-child(1) {
  top: 6px;
}
.menu-line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.menu-line:nth-child(3) {
  bottom: 6px;
}

/* Animación al abrir el menú */
.menu-open .menu-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-open .menu-line:nth-child(2) {
  opacity: 0;
}
.menu-open .menu-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

JavaScript

const menuToggle = document.getElementById("menuToggle");

menuToggle.addEventListener("click", () => {
  menuToggle.classList.toggle("menu-open");
});

Animación de un loader

Las transformaciones se emplean a menudo para indicadores de carga. En este ejemplo, un cuadrado rota, cambia de tamaño y de opacidad.

HTML

<div class="loader-container">
  <div class="loader"></div>
</div>
<!-- Contenido principal -->
<div class="content">
  <h1>¡Página cargada!</h1>
  <p>El loader utilizó transformaciones CSS fluidas: <code>rotate</code>, <code>scale</code>, <code>opacity</code>.</p>
</div>

CSS

/* Contenedor a pantalla completa */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  z-index: 9999;
}

/* El loader — un cuadrado con transformaciones */
.loader {
  width: 50px;
  height: 50px;
  background: #3498db;
  border-radius: 4px;
  transform-origin: center;
  /* Animación única y fluida */
  animation: spin-pulse 1.4s infinite ease-in-out;
}

/* Animación combinada: rotación + escalado suave + opacidad */
@keyframes spin-pulse {
  0% {
    transform: rotate(0deg) scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: rotate(180deg) scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: rotate(360deg) scale(0.8);
    opacity: 0.6;
  }
}

/* Contenido principal */
.content {
  display: none;
  text-align: center;
  padding: 60px;
  font-family: "Arial", sans-serif;
  color: #333333;
}

/* Oculta el loader cuando la página está "cargada" */
body.loaded .loader-container {
  display: none;
}
body.loaded .content {
  display: block;
}

JavaScript

// Simulación de carga
window.onload = function () {
  setTimeout(() => {
    document.body.classList.add("loaded");
  }, 5000);
};

Cubo 3D en rotación

Implementemos una animación tridimensional.

HTML

<div class="scene">
  <div class="cube">
    <div class="cube-face">1</div>
    <div class="cube-face">2</div>
    <div class="cube-face">3</div>
    <div class="cube-face">4</div>
    <div class="cube-face">5</div>
    <div class="cube-face">6</div>
  </div>
</div>

CSS

/* Contenedor de la escena, que define la perspectiva */
.scene {
  perspective: 800px; /* Un valor menor intensifica el efecto */
  width: 200px;
  height: 200px;
  margin: 100px auto;
  position: relative;
}

/* El cubo */
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d; /* Conserva el espacio 3D para las caras */
  animation: rotate-cube 6s infinite linear;
}

/* Estilos comunes para las caras */
.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  background: rgba(0, 123, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  backface-visibility: hidden; /* Para no ver la cara posterior */
}

/* Posicionamiento de las caras del cubo */
.cube-face:nth-child(1) { transform: translateZ(100px); } /* Frontal */
.cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(100px); } /* Derecha */
.cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(100px); } /* Trasera */
.cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(100px); } /* Izquierda */
.cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(100px); } /* Superior */
.cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(100px); } /* Inferior */

/* Animación de rotación del cubo */
@keyframes rotate-cube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

Recursos Adicionales y Herramientas Útiles

• Documentación oficial de transform en MDN
• Soporte de transform en navegadores (Can I Use)
• Generador visual de transform
• Librería JS para conversión a matrix