traducir vs transformar origen css3

Question

Me preguntaba si alguien podría ayudarme. He tenido problemas para entender qué es exactamente la propiedad css3: transform-origin. Parece que no puedo seguir la dirección en que se mueve.

Por ejemplo, supongamos que tiene un div cuadrado y lo gira 40 grados. y luego realiza un transform-origin: 100% 0%. ¿No puedes hacer un translateX(and some value)? Parece que translateX lo moverá a lo largo del eje x con respecto al eje recién girado después de realizar una rotación. Parece que no puedo seguir lo que está haciendo el origen de la transformación, ni qué es exactamente.

Un ejemplo claro y completo sería muy apreciado. =)

Answer 1

transform-origin cambia el punto en el que el elemento se transforma en lugar de mover todo el elemento (como lo haría traducir). El valor predeterminado es transform-origin: 50% 50%;.

Aquí es una ilustración: http://jsfiddle.net/joshnh/73g7t/