Check out a free preview of the full Introduction to D3.js course

The "Rotate" Lesson is part of the full, Introduction to D3.js course featured in this preview video. Here's what you'd learn in this lesson:

Shirley explorers rotate, one of the SVG transform methods, and demonstrates how to rotate around an SVG by changing the x and y coordinates.

Preview
Close

Transcript from the "Rotate" Lesson

[00:00:00]
>> Another note about SVG transforms the time again about rotate. And similarly to the other transforms, rotate also affects the whole coordinate system and is set in degrees rather than radians. And so if we play around with this, you can see that there is the rotation default, the coordinate system is default-rotated around the origin, 0, 0.

[00:00:37]
And there's additional set of x&y that you can provide to rotate after the degrees. To specify if you want your coordinate system to be rotated around some other x,y position, but by default it rotates around 0,0. So if you kind of rotate these around you can see how the rectangle might go to different places if you change the x y around.

[00:01:13]
I don't tend to set the x, y position if I rotate I usually will set the translate first. And then set the rotate so that I just don't kind of get this like. It gets really confusing for me at least if I move the rectangle within the coordinate system and it no longer goes where I expected it to.

[00:01:39]
So I tend to translate together with rotate instead of trying to move around the x, y. And on that note, I also want to give a small warning that just like before the width and the order in which you chain rotate and translate, or really dramatically change the resulting coordinate system.

[00:02:02]
So be careful. And let me show you. So let's see. So let's start out with everything the same, but if I rotate it a little bit, depending on the translation, it dramatically changes where the coordinate system ends up. And then depending on, let's see the rotation and really changes.

[00:02:34]
There we go. So that's where the second one is now. Yeah. Personally, I find it kind of cool and interesting. But I guess I just find these kinds of things cool and interesting. But again, the good rule of thumb that I use is I translate first and then I rotate after.

[00:02:56]
So that the moving has already happened before. I confuse myself with rotating the coordinate system. So yes, just translate first and usually things will work out.

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