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/j_sidharta May 02 '19

I didn't think you could do something like this without js. Amazing!

1

u/throwies11 May 02 '19

For future reference you can set border-radius: 50% to all square objects that you want to make circular, regardless of their size in pixels.

1

u/[deleted] May 02 '19

For sure! This is something I hacked together in a hurry. It can most certainly be greatly improved.

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.