Transform Origin

El pivot point: desde dónde todo comienza

Piensa en la aguja de un reloj. Cuando el reloj marca las 12 y avanza hacia la 1, la aguja gira. Pero no gira desde su centro: gira desde su extremo inferior, anclada en el centro del reloj. Si girara desde su propio centro, haría algo completamente diferente, nada que se parecería a un reloj.

Este concepto de "desde dónde gira un elemento" se llama punto de origen (transform-origin), y es uno de los conceptos más poderosos y subutilizados de todo CSS Transform. Sin entenderlo, muchas rotaciones y escalas no se comportarán como esperas.

¿Qué es transform-origin?

Por defecto, todas las transformaciones (rotate, scale, skew) tienen su punto de origen en el centro exacto del elemento, que se representa como 50% 50% o center center.

transform-origin te permite mover ese punto a cualquier lugar: una esquina, un borde, un punto exacto en píxeles, o fuera del elemento por completo:

• transform-origin: top left — Esquina superior izquierda. Ideal para menús que se despliegan desde la esquina.
• transform-origin: bottom center — Centro del borde inferior. Esencial para agujas de reloj.
• transform-origin: right center — Centro del borde derecho. Útil para elementos que "crecen" hacia la izquierda.
• transform-origin: 20px 80px — Valores exactos en píxeles para posicionamiento preciso.

Impacto en rotaciones

La diferencia visual más dramática se aprecia con rotate(). Si tienes un rectángulo y lo rotas 90 grados:

• Con transform-origin: center (defecto): El rectángulo gira sobre su centro y termina en una posición completamente diferente.
• Con transform-origin: top left: La esquina superior izquierda permanece fija como un pivote y el rectángulo "cae" hacia la derecha desde ahí.

Impacto en scale (escalado)

Con scale(2) y el origen por defecto, el elemento crece hacia todos lados por igual desde su centro. Pero si cambias el origin a top left, el elemento crecerá hacia abajo y a la derecha, anclándose en su esquina superior izquierda. Esto es muy útil para menús desplegables que "crecen" desde el botón que los activa.

Caso real: El menú que se despliega

Cuando un menú desplegable de una aplicación moderna aparece debajo de su botón (como el menú de usuario en GitHub o Vercel), visualmente parece que "crece" desde el botón hacia abajo. La técnica exacta: se aplica scale(0) al estado inicial y scale(1) al estado visible, con transform-origin: top right (o la esquina correspondiente al botón) para que el crecimiento empiece desde donde está el cursor.