Transform-Origin

[00:00:00]
>> Sarah Drasner: Probably the biggest thing that you need to understand before we move forward and in order to animate is transform-origin. Transform-origin is really like the thing that keeps your animation or can make or break your animation in terms of whether it's believable. So transform-origin, when you're spinning something around, transform-origin wants to start here, which is totally counterintuitive.

[00:00:25]
You'd assume that when you're animating something it would spin like that, right? You would think that, that would be 50-50. Most of what I'm doing is setting 50-50 [LAUGH] transform-origin. But if let's say you have an arm on a robot or something that you're moving around, you wouldn't want it starting here either.

[00:00:44]
You'd probably want it starting over here so that it can swing around and stuff. So this again is always, it's always these x/y values, x/y values, so we're finding the percentage. You can use things like top, left, center, center. I would suggest not doing that, and using percentages instead.

[00:01:03]
Because if you need to knock something into place, then you just change a number a little bit, rather than rewrite the code, you know what I'm saying? So instead of saying, if I have center-center, and I find out that I need to change the transform-origin just a little bit I can just modify those percentages by a little bit and kind of put it in place.

[00:01:22]
Whereas if I've used the named ones, I'd have to rewrite it. So this pen by Dan Wilson I think does a pretty good job of showing you where those transform-origins live.