Check out a free preview of the full SVG Essentials & Animation, v2 course

The "Transform-Origin" Lesson is part of the full, SVG Essentials & Animation, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Sarah demonstrates that an SVG rotates around a different axis by default than what is assumed.


Transcript from the "Transform-Origin" Lesson

>> 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.

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.

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.

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.

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.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now