Rotating a spinning object around a central point

[johnnyno 3 Likes (Newbie)]

Hi

 

I'm trying to rotate an object around a central point. In this case the object is a pie. I want the pie to be spinning as it rotates!

 

Any ideas?

 

Many thanks!

See the Pen LNyyYN by johnnyno (@johnnyno) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

The easiest way I can think of is to tween the rotation of the div with the transform origin where you have it, and at the same time tween the rotation of the img itself at its default transform origin.

 

See the Pen KzmmzJ by sgorneau (@sgorneau) on CodePen

[johnnyno 3 Likes (Newbie)]

Thanks Shaun, you're a star!!!

[Diaco 1,948 Likes (Superhero)]

Hi guys

 

in addition ; you can use a bezier Tween too : 

See the Pen VabQZK by MAW (@MAW) on CodePen

[johnnyno 3 Likes (Newbie)]

Thanks Diaco, because I now have this 

See the Pen GZmwML by johnnyno (@johnnyno) on CodePen

 

The aborting pies are not following the exact same orbit...

 

Could I use the bezier tween to create a consistent orbit for all the smaller pies?

 

Thanks

[Diaco 1,948 Likes (Superhero)]

yep , pls check this out : 

See the Pen jqmXYY by MAW (@MAW) on CodePen

[Carl 9,066 Likes (Superhero)]

Awesome solution, Diaco!

[Diaco 1,948 Likes (Superhero)]

i think this can help you too ,

 

it's svg , but you can use that for div/img tag too ; now you can simply set the number of objects to orbit : 

 

See the Pen RaVzmz by MAW (@MAW) on CodePen

[retropunk 126 Likes (Specialist)]

awesome gears animation!