3

I hope that this question is not too specific so it can relate to others problems...

I have 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 moons animation is set so the moon will load ontop of the planet in the same position, but is pushed out with translateX then roatated, like so:

@keyframes myOrbit {
from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
to   { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}

Think of it as a planet with a moon rotating around the planet.

When the user resizes the window the planets height/width will resize, but I also need the moons height/width to resize AND the distance between it and the planet needs to lower.

I have set up an example here... https://codepen.io/anon/pen/mVvYbR

Would this be possible to acheive with just CSS, or would javascript be needed? I will use jQuery if need be, (I am not great at it though) but I would think a pure CSS solution would be cleaner... maybe I'm wrong on that one.

I should also note that the way it is set up currently (with the planet div holding the moon, is so that I can have multiple children (multiple moons). However I also think that this would mean having a massive amount of different animations for moons/planets which need different translateX's... So maybe jQuery is a better solution there...

If I am not clear on anything please let me know.

Thank you!

Joey Thomas
  • 113
  • 8
  • 1
    JS would be your solution. Please take a look at [this](http://stackoverflow.com/a/13104099/2599266) for why and [this](http://stackoverflow.com/a/14091251/2599266) for some ideas on how to do it. Hope these help! – Obsidian Feb 14 '16 at 14:31
  • 1
    Just use percent everywhere? https://codepen.io/wilmaknattern/pen/VegOPP – Thomas Feb 14 '16 at 14:33

1 Answers1

1

You can try do it with just css. You can use viewport units so all values will depend on viewport size.

.planet {
    width: 10vw;
    height: 10vw;
      background: url(http://placehold.it/940x940) no-repeat center center;
    background-size: contain;
    z-index: 1;
}

.moon {
    position: absolute;
    background: url(http://placehold.it/140x140) no-repeat center center;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    -webkit-animation: myOrbit 20s linear infinite;
       -moz-animation: myOrbit 20s linear infinite;
         -o-animation: myOrbit 20s linear infinite;
            animation: myOrbit 20s linear infinite;
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(20vw) rotate(0deg); z-index:1}
    to   { transform: rotate(360deg) translateX(20vw) rotate(-360deg); z-index:2}
}

Sample -> here

Probably you will need to add some media queries to handle different screen aspect ratios. Current viewport units support -> caniuse.com

Damian Krawczyk
  • 2,241
  • 1
  • 18
  • 26
  • Ah thank you that's great works really well. One question: why have you added z-index to from and to? Also is there a way to get translateX out of the @keyframes and in the general style rule? So I can control it with jquery – Joey Thomas Feb 14 '16 at 19:34
  • z-index is to force browser to calculate dimensions on resize (it forces calc and paint). Yes you can move translateX outside animation. – Damian Krawczyk Feb 14 '16 at 19:42
  • It seems to break the animation if I take translateX out. If i put it in .moon { transform: translateX(20vw); } it doesn't seem to like it. i must be doing something wrong here – Joey Thomas Feb 14 '16 at 20:19