Is this question specific enough to relate to others' problems?
My issue involves two elements, a child and a parent, with the child element rotating around the parent using CSS animations.
<div class="planet">
<div class="moon"></div>
</div>
The moon's animation is designed so that it initially loads on top of the planet in the same position, but is then pushed out with translateX and rotated:
@keyframes myOrbit {
from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
to { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
Imagine a planet with a moon orbiting around it.
When the user resizes the window, both the planet's height/width and the moon's height/width should resize. Additionally, the distance between the moon and the planet needs to decrease.
I have provided an example here: https://codepen.io/anon/pen/mVvYbR
Is it possible to achieve this effect using just CSS, or would JavaScript be necessary? I am willing to use jQuery if needed, although I prefer a cleaner CSS solution.
Currently, the setup has the planet div containing the moon for the purpose of having multiple children (multiple moons). However, this may lead to numerous animations for different moons with varying translateX values. In such cases, maybe jQuery would be a better solution...
If anything is unclear, please let me know.
Thank you!