Animating Items Around a Point

[kirupa]

A fun animation with a good dose of technical quirkiness is one where we have items rotate around a particular point. Take a look at the following:

---

This is a companion discussion topic for the original entry at https://www.kirupa.com/animations/rotating_items_around_a_point.htm

[madmeur]

There is one thing i cant understand. Where is the starting degree of rotation is? From what point it starts to count out the degreees? I mean at a, c or b is 0 point? Where is the start if O is Origin?

[PAEz]

Im having a little trouble understanding where your confusion is so its a little hard to know how to explain, but Im going to assume your problem is understanding whats happening in this…

@keyframes spinAround {
  from {
    transform: rotate(0deg) translate(120px);
  }
  to {
    transform: rotate(360deg) translate(120px);
  }
}

Imagine C and B represent the Y and X axis and the image is a piece of paper.
The first transform is saying to rotate 0 degrees so the piece of paper wouldnt be rotated.
The next transform is saying move it 120px along the X axis, so the element would end up at D.
Now lets imagine the transform was

transform: rotate(45deg) translate(120px);

For this one imagine there is two pieces of paper of the image on top of each other and the top one is see through. Put a pin in the center (origin O) and rotate the top piece of paper clockwise until there is a 45 degree angle between the original position (the O-C line on the bottom piece of paper) and the rotated line.
Now on the next transform function we are saying to move the element along the X axis 120px. Well as stated earlier the B represents the X axis and it still does, but as you can see it no longer points directly to the right but between B and D so thats where the element will end up, 120px along that line from O. So it realy doesnt matter where it starts, your basically saying rotate all points 45degress clockwise.
Now lets imagine the image is a div and in that div we have 4 elements (ABCD) inside it that we want to rotate around the origin 0 which is the center of the div. In this one if we rotated the piece of paper (the div) 45 degrees A,B,C and D would all end up 45 degrees away from where they started, so in the case you could say that the starting degrees would be along the line O-A and O-B and O-C and O-D.

hehe, dont know if that helped, but thats about the best I can explain it…prolly should have done some pics but Im lazy.

[kirupa]

If I had to simplify @PAEz’s detailed answer, the 0 degree is where B is. As you increase the degree values, your shape will rotate clockwise.