traducir vs transform-origin css3

Question

Me preguntaba si alguien me podría ayudar. He estado teniendo problemas para entender qué es exactamente la propiedad css3: transform-origin . Parece que no puedo seguir la dirección en la que se está moviendo.

Por ejemplo, digamos que tienes un div cuadrado y lo giras 40 grados. y luego realiza un transform-origin: 100% 0% . ¿No puedes simplemente 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, o lo que es exactamente lo que es.

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 la traducción). El valor predeterminado es transform-origin: 50% 50%; .

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