¿Qué es transform-origin?

Cuando utilizamos las propiedades de transformación, estas se ejecutan tomado como punto de origen el centro el objeto. Esto es así en todos los navegadores que las soportan, incluyendo Internet Explorer 9. En el resto, solemos emplear filtros pero estos funcionan de manera completamente distinta así que por un rato nos ovidamos de ellos.

Si bien todos los navegadores modernos aceptan la propiedad, por ahora, cada uno de ellos utiliza prefijos propios:

-moz-transform para Firefox
-webkit-transform para Chrome y Safari
-o-transform para Opera
-ms-transform para Internet Explorer 9

Si bien ese punto de origen es el que esta definido por defecto, también hay una propiedad que permite cambiarlo llamada transform-origin que también tiene sus prefijos:

-moz-transform-origin
-webkit-transform-origin
-o-transform-origin
-ms-transform-origin

En todos los navegadores, el valor inicial es 50% 50% y para definirlo pueden usarse porcentajes, pixeles o palabras como center, left, right, top o bottom.

El orden es el mismo que en todas las otras propiedades, el primero indica la coordenada horizontal y el segundo la vertical. Así que si pusieramos 0 0 o left top, cambiaríamos el punto de origen al ángulo superior izquierdo (que es como funcionan los filtros de IE):

De este modo:

transform-origin: center center o transform-origin: 50% 50% es el centro y el valor por defecto
transform-origin: left top o transform-origin: 0% 0% es el ángulo superior izquierdo
transform-origin: right top o transform-origin: 100% 0 es el ángulo superior derecho
transform-origin: left bottom o transform-origin: 0% 100% es el ángulo inferior izquierdo
transform-origin: right bottom o transform-origin: 100% 100% es el ángulo inferior derecho

center top	center bottom	left center	right center

REFERENCIAS:Understanding CSS3 2D Transforms