Question

I was wondering if someone could help me. I’ve been having trouble understanding what exactly is the css3 property: transform-origin. I can’t seem to follow the direction it is moving.

So for example, lets say you have a square div, and you rotate it 40 degrees. and then you perform a transform-origin: 100% 0%. can’t you just do a translateX(and some value)? It seems like translateX will move it along the x-axis with respect to the newly rotated axis after performing a rotate. I can’t seem to follow what transform-origin is doing, or what exactly it even is.

A clear and thorough example would be much appreciated. =)

Answer 1

transform-origin changes the point at which the element transforms rather than moving the entire element (as translate would). The default value is transform-origin: 50% 50%;.

Here is an illustration: http://jsfiddle.net/joshnh/73g7t/