r/learnjavascript • u/codeobserver • May 01 '19

Solar system simulation using JavaScript

262 Upvotes

98% Upvoted

22 comments sorted by

View all comments

4

u/[deleted] May 02 '19 edited May 02 '19

Here's the same thing without any JavaScript at all, just CSS:

https://jsfiddle.net/k1rzxumv/

Oh and the planets rotate too. =)

1

u/riskybusinesscdc May 02 '19

Can you explain what's going on in your keyframe CSS?

2

u/[deleted] May 02 '19

Sure.

100% { transform: rotate(360deg); }

Whenever any ongoing transformation is complete (or when the element is first rendered) the transform property, which is responsible for any movement/animation, is getting set to rotate(360deg), which then takes this element and rotates it full circle.