translate vs transform-origin css3

Question

Mi chiedevo se qualcuno potesse aiutarmi. Ho avuto difficoltà a capire quale sia esattamente la proprietà css3: transform-origin. Non riesco a seguire la direzione in cui si muove.

Quindi, per esempio, diciamo di avere un div quadrato e lo ruotiamo di 40 gradi. e quindi esegui un transform-origin: 100% 0%. non puoi semplicemente fare un translateX(and some value)? Sembra che translateX lo sposti lungo l'asse x rispetto all'asse appena ruotato dopo aver eseguito una rotazione. Non riesco a seguire ciò che trasforma-origine sta facendo, o che cosa è esattamente uguale.

Un esempio chiaro e completo sarebbe molto apprezzato. =)

Answer 1

transform-origin modifica il punto in cui l'elemento si trasforma anziché spostare l'intero elemento (come tradurrebbe). Il valore predefinito è transform-origin: 50% 50%;.

Ecco un esempio: http://jsfiddle.net/joshnh/73g7t/