Menu
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. =)
742
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%; .
The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation.
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
By default, the origin of a transform is “50% 50%”, which is exactly in the center of any given element. Changing the origin to “top left” (as in the demo above) causes the element to use the top left corner of the element as a rotation point.
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/
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
