transform-origin y cambios de escala

Ahora que el antiguo mal ha sido derrotado y Pendalf está de vuelta en casa, podemos estudiar otro detalle de las transformaciones: la propiedad transform-origin. Y, de paso, colgar una foto de recuerdo en la pared.

Esta propiedad se utiliza junto con transform y establece el origen del sistema de coordenadas en el que actúa la transformación.

Para transformaciones 2D, su sintaxis es:

transform-origin: origen-en-X [origen-en-Y]

Los valores pueden expresarse en unidades de longitud, como px o em, en % o mediante las palabras clave left, right, top, bottom y center.

Con dos palabras clave, el orden puede invertirse: top left y left top señalan la misma esquina.

El valor predeterminado de transform-origin es 50% 50%: el origen se encuentra en el centro del objeto. Si no se indica origen-en-Y, se utiliza 50%.

Veamos cómo cambia el resultado de scale con distintos valores de transform-origin. En este caso, el bloque cambia de tamaño respecto al punto indicado.