Docs ejecutables de CSS: Transform en CSS

Q: ¿Qué hace transform en CSS?

Cambia cómo se dibuja un elemento: movido (translate), cambiado de tamaño (scale), girado (rotate) o inclinado (skew). El elemento conserva su lugar original en el layout, así que los elementos que lo rodean no se mueven.

Q: ¿Cómo aplico varias transformaciones en CSS?

Enuméralas en un solo valor de transform separadas por espacios: transform: translateX(50px) rotate(20deg) scale(1.2);. Escribir una segunda declaración transform reemplaza a la primera en lugar de sumarse a ella.

Qué hace transform

transform cambia cómo se dibuja un elemento: movido, escalado, girado o inclinado. Los contornos punteados de abajo muestran dónde estaría cada caja sin su transformación:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 30px 20px; }
    .slot { outline: 2px dashed #9ca3af; width: 90px; height: 60px; }
    .box { width: 90px; height: 60px; background: #2563eb; color: white; display: grid; place-items: center; }
    .t1 { transform: translate(20px, 10px); }
    .t2 { transform: scale(1.3); background: #16a34a; }
    .t3 { transform: rotate(20deg); background: #f59e0b; color: #111827; }
    .t4 { transform: skewX(-20deg); background: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="slot"><div class="box t1">translate</div></div>
    <div class="slot"><div class="box t2">scale</div></div>
    <div class="slot"><div class="box t3">rotate</div></div>
    <div class="slot"><div class="box t4">skewX</div></div>
  </div>
</body>
</html>

translate(20px, 10px) mueve la caja azul 20px a lo largo y 10px hacia abajo. scale(1.3) hace la verde un 30% más grande alrededor de su centro. rotate(20deg) gira la ámbar en el sentido de las agujas del reloj, y skewX(-20deg) inclina la oscura. En todos los casos, el hueco punteado, que es el espacio que ocupa el elemento en el layout, se queda exactamente donde estaba.

Funciones de transform

Función	Hace	Ejemplo
`translate(x, y)`	mueve	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	mueve en un eje	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	cambia el tamaño (1 = original, 0.5 = la mitad, negativo refleja)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	cambia el tamaño en un eje	`scaleX(0.5)`
`rotate(angle)`	gira en el sentido de las agujas del reloj (negativo = en sentido contrario)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	inclina	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	todo lo anterior en una matriz, sobre todo lo que devuelve el navegador
`none`	sin transformación

Los porcentajes en translate() son relativos al tamaño propio del elemento, no al de su padre. La rotación tiene su propia página con grados, vueltas y giro continuo: rotar con CSS.

Playground de transform

Mueve los controles deslizantes. La primera línea es el valor de transform que armaste; la segunda es la matriz que calculó el navegador a partir de él, que es lo que devuelve getComputedStyle para cualquier transformación:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 16px; }
    .stage { height: 170px; display: grid; place-items: center; background: #f3f4f6; margin: 10px 0; overflow: hidden; }
    #box { width: 80px; height: 80px; background: #2563eb; color: white; display: grid; place-items: center; border-radius: 6px; }
    code { display: block; }
  </style>
</head>
<body>
  <div class="controls">
    <label>translateX <input type="range" data-f="translateX" data-u="px" min="-120" max="120" value="0"></label>
    <label>scale <input type="range" data-f="scale" data-u="" min="0.5" max="1.8" step="0.1" value="1"></label>
    <label>rotate <input type="range" data-f="rotate" data-u="deg" min="-180" max="180" value="0"></label>
    <label>skewX <input type="range" data-f="skewX" data-u="deg" min="-40" max="40" value="0"></label>
  </div>
  <div class="stage"><div id="box">Box</div></div>
  <code id="value"></code>
  <code id="matrix"></code>
  <script>
    const box = document.getElementById('box');
    const inputs = document.querySelectorAll('input');
    const update = () => {
      const t = [...inputs].map((i) => i.dataset.f + '(' + i.value + i.dataset.u + ')').join(' ');
      box.style.transform = t;
      document.getElementById('value').textContent = 'transform: ' + t + ';';
      document.getElementById('matrix').textContent = 'computed: ' + getComputedStyle(box).transform;
    };
    inputs.forEach((i) => i.addEventListener('input', update));
    update();
  </script>
</body>
</html>

Las transformaciones no mueven el layout

Un elemento transformado se dibuja en otro lugar, pero la página se acomoda como si no estuviera transformado. Sus vecinos mantienen sus posiciones. Eso es lo que hace que las transformaciones sean buenas para efectos hover y animaciones: nada a su alrededor se vuelve a acomodar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No reflow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 10px; padding: 24px 10px; }
    .row div { width: 80px; height: 50px; background: #e5e7eb; display: grid; place-items: center; }
    .row .grow-t { transform: scale(1.5); background: #16a34a; color: white; }
    .row .grow-w { width: 120px; height: 75px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row" id="a"><div>A</div><div class="grow-t">scale(1.5)</div><div id="c1">C</div></div>
  <div class="row" id="b"><div>A</div><div class="grow-w">width 120px</div><div id="c2">C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'C starts at x = ' + document.getElementById('c1').offsetLeft + 'px next to the scaled box, and at x = ' +
      document.getElementById('c2').offsetLeft + 'px next to the resized one.';
  </script>
</body>
</html>

Las dos cajas del medio se ven 1.5 veces más grandes. La escalada se superpone a sus vecinas y C se queda en su sitio; la que se agrandó con width y height empuja a C 40px más allá.

Varias transformaciones y su orden

Pon varias funciones en un solo transform, separadas por espacios. El orden cambia el resultado porque, leídas de izquierda a derecha, cada función trabaja en el sistema de coordenadas que dejaron las funciones anteriores:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform order</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .stage { position: relative; height: 170px; background: #f3f4f6; }
    .box { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; opacity: 0.85; }
    .a { transform: translateX(120px) rotate(45deg); background: #2563eb; }
    .b { transform: rotate(45deg) translateX(120px); background: #16a34a; }
  </style>
</head>
<body>
  <div class="stage"><div class="box a"></div><div class="box b"></div></div>
  <p id="out"></p>
  <script>
    const center = (el) => { const r = el.getBoundingClientRect(); return Math.round(r.left + r.width / 2) + ', ' + Math.round(r.top + r.height / 2); };
    document.getElementById('out').textContent =
      'blue (translate then rotate) center: ' + center(document.querySelector('.a')) +
      '  |  green (rotate then translate) center: ' + center(document.querySelector('.b'));
  </script>
</body>
</html>

La caja azul se movió 120px en línea recta y luego se giró en su lugar. La caja verde se giró primero, así que su "eje x" apunta en diagonal, y translateX(120px) la mueve por la diagonal. Las mismas funciones, otro lugar.

La otra trampa: una segunda declaración transform reemplaza a la primera. Si una tarjeta tiene transform: rotate(-2deg) y su regla de hover dice transform: scale(1.05), la rotación desaparece en hover. Repite las dos (rotate(-2deg) scale(1.05)) o usa las propiedades individuales de abajo.

transform-origin

Escalar, girar e inclinar ocurren alrededor de un punto fijo, el origen de la transformación, que por defecto es el centro. Cámbialo con palabras clave, longitudes o porcentajes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 20px 30px 40px; }
    .slot { outline: 2px dashed #9ca3af; width: 80px; height: 50px; }
    .box { width: 80px; height: 50px; background: #2563eb; transform: rotate(25deg); }
    .tl { transform-origin: top left; }
    .br { transform-origin: bottom right; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>center</code><div class="slot"><div class="box"></div></div></div>
    <div><code>top left</code><div class="slot"><div class="box tl"></div></div></div>
    <div><code>bottom right</code><div class="slot"><div class="box br"></div></div></div>
  </div>
</body>
</html>

Las tres cajas giran 25 grados. La primera pivota sobre su centro, la segunda mantiene su esquina superior izquierda fija en la esquina del hueco y la tercera su esquina inferior derecha. Un menú desplegable que crece desde su botón usa transform-origin: top con scale().

Las propiedades translate, scale y rotate

Los navegadores modernos también tienen tres propiedades separadas que hacen lo mismo que las funciones, pero que se pueden definir y animar de forma independiente:

.card {
  rotate: -2deg;
  transition: scale 0.2s ease-out;
}
.card:hover {
  scale: 1.05;   /* the rotation stays, because it is a different property */
}

Siempre se combinan como si estuvieran escritas transform: translate(...) rotate(...) scale(...) delante de cualquier valor de transform, sin importar el orden en que las declares. Fíjate en la sintaxis: translate: 10px 20px y scale: 1.2 llevan los valores sin los paréntesis de la función.

Centrar con translate(-50%, -50%)

Como los porcentajes de translate() se refieren al tamaño propio del elemento, top: 50%; left: 50%; transform: translate(-50%, -50%) centra en su padre un elemento con posición absoluta de cualquier tamaño. La página de cómo centrar un div lo compara con flexbox y grid.

Errores comunes

Dos declaraciones transform. La posterior gana por completo. Combina las funciones, o usa las propiedades rotate, scale y translate.
Transformar un elemento inline. Un <span> o un <a> simples ignoran transform. Hazlo inline-block.
Esperar que los vecinos se muevan. Las transformaciones nunca cambian el layout. Para hacer espacio, cambia width, margin o gap.
Orden de funciones incorrecto. rotate() antes de translate() mueve a lo largo del eje girado.
Sorpresas con hijos con position: fixed. Un elemento transformado se convierte en el bloque contenedor de los descendientes con posición fija, así que un encabezado fijo dentro de él se desplaza con él. También crea un nuevo contexto de apilamiento para z-index.

Preguntas frecuentes

¿Qué hace transform en CSS?

Cambia cómo se dibuja un elemento: movido (translate), cambiado de tamaño (scale), girado (rotate) o inclinado (skew). El elemento conserva su lugar original en el layout, así que los elementos que lo rodean no se mueven.

¿Cómo aplico varias transformaciones en CSS?

Enuméralas en un solo valor de transform separadas por espacios: transform: translateX(50px) rotate(20deg) scale(1.2);. Escribir una segunda declaración transform reemplaza a la primera en lugar de sumarse a ella.

¿Importa el orden de las funciones de transform?

Sí. Leídas de izquierda a derecha, cada función trabaja en los ejes que dejaron las anteriores, así que rotate(45deg) translateX(100px) mueve el elemento a lo largo de un eje girado, mientras que translateX(100px) rotate(45deg) lo mueve en línea recta y después lo gira.

¿Qué es transform-origin?

El punto fijo alrededor del cual se escala, se gira y se inclina. El valor por defecto es el centro (50% 50%). transform-origin: top left hace que un elemento crezca desde su esquina superior izquierda, o gire alrededor de ella.

¿Por qué transform no funciona en mi span?

Las transformaciones no se aplican a elementos inline no reemplazados, como un <span> o un <a> simples. Dale al elemento display: inline-block o block y la transformación funciona.

Conceptos relacionados