translate vs transform-origin css3

Question

我想知道如果有人能幫助我。我一直無法理解css3屬性到底是什麼：transform-origin。我似乎無法遵循它正在移動的方向。

例如，假設您有一個方形的div，並將其旋轉40度。然後執行transform-origin: 100% 0%。你不能只是做一個translateX(and some value)？在執行旋轉之後，translateX似乎會沿x軸相對於新旋轉的軸移動它。我似乎無法遵循變換原點正在做什麼，甚至是什麼。

一個清晰和徹底的例子將不勝感激。 =）

Answer 1

transform-origin更改元素轉換的位置，而不是移動整個元素（如translate）。默認值是transform-origin: 50% 50%;。

這裏有一個例子：這裏http://jsfiddle.net/joshnh/73g7t/