An educational demo that visualizes each planet's rotational period and orbital tilt using only CSS.
The planet rotations in this demo are all moving at 36,000x their normal speed. The rotation speed takes 10% of each planet's day length and measures that value in seconds instead of hours.
In the SCSS mixin, this happens as:
animation: planetRotate calc(var(--$planet-day)*.1s) linear infinite;
The formula is:
planetDayLengthHours x .1 = planetRotationSpeed(seconds)
- Earth: 23.9 x .1 = 2.39 seconds
- Jupiter: 9.9 x .1 = .99 seconds
- Venus: 5832.5 x .1 = 583.25 seconds
To get 36,000, I calculate the amount of seconds in a planet's day and divide it by the rotation speed above:
(secPerMin x minPerHour x planetDayLengthHours) / planetRotationSpeed = 36,000
- Earth: (60 x 60 x 23.9) = 86,040 / 2.39 = 36,000
- Jupiter: (60 x 60 x 9.9) = 35,640 / .99 = 36,000
- Venus: (60 x 60 x 5832.5) = 20,997,00 / 583.25 = 36,000
- Animating a background-position from 0% to 200% will allow it to loop infinitely and seamlessly.
- Mixin interpolation is more capable with CSS custom variables than SCSS variables. I originally used SCSS variables, but I ran into some major roadblocks while interpolating them into the "planetization" mixin.
- The atmospheric visual effects are a combination of inset and regular box-shadows that provide the dark-side shadow, day-side illumination, and slight atmospheric corona.
Fun Planet Info
- Wow Jupiter spins ridiculously fast considering how large it is.
- Venus spins very slowly AND in the opposite direction of other planets. Seriously, it barely moves in this demo.
- A day on Mercury is 2/3 of a year on Mercury.
- The day and year values in this demo are measured in Earth hours and Earth days.
- All examples take place during each planet's winter solstice.
- The Sun is spins at different speeds from its equator to its poles, so this depiction is approximate.
- Reference: NASA - Planetary Fact Sheet