Rotate dot around globe using CSS animation

Question

I have got an image of a globe on which I want to put a red dot rotating in different angle. Below is what I have implemented so far for testing purpose.

.globe{
  width:200px; height:200px; background-color:blue;
  border-radius:100px;
  position:absolute; left:0px; right:0px; top:150px;
  margin-left:auto; margin-right:auto;
}

.dot{
  width:30px; height:30px; background-color:red;
  border-radius:15px;
  position:absolute; left:0px; right:0px; top:200px;
  margin-left:auto; margin-right:auto;
  animation: rotate 3s infinite linear;
}


@keyframes rotate {
	from {
		transform: rotate(0deg)
		           translate(-150px)
		           rotate(0deg);
	}
	to {
		transform: rotate(360deg)
		           translate(-150px) 
		           rotate(-360deg);
	}
}

<div class="dot"></div>
<div class="globe"></div>

And below is a screenshot of the original globe image and a red dot. https://www.awesomescreenshot.com/image/2551396/94b0a80cb7d868fe1fa10f318d698438

Ignore the red line as that is going to be just a fixed image.

I am not sure how to rotate the dot around the globe in the counter clock wise direction. So that when it finishes 1 rotation, it comes from behind the globe. But when it starts, it goes over the globe image.

I hope I have explained this properly :)

Answer 1

I found this solution from this article, which had this codepen. The article is worth a read, because the author explains how it is done. All I have changed is adding rotateY(-30deg) to the #galaxy class to give it the tilt you wanted and changed the colours. Sadly the red line doesn't appear in front of the planet in firefox, but seems to do it in chrome.

To change the size of the earth and moon, you just need to change the font size on the #earth and #moon selectors at the bottom of the CSS. Have a play around with the code. I am sure you will be able to get it to look exactly how you want.

It is better to view the code snippet in full screen mode.

/* Background */

    #universe {
      z-index: 1;
      position: absolute;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    #galaxy {
      position: relative;
      width: 100%;
      height: 100%;
      transform: rotateX(75deg) rotateY(-30deg);
      transform-style: preserve-3d;
    }

    #earth, .moon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1em;
      height: 1em;
      margin-top: -0.5em;
      margin-left: -0.5em;
      border-radius: 50%;
      transform-style: preserve-3d;
    }

    #earth {
      background-color: blue;
      background-repeat: no-repeat;
      background-size: cover;
      transform: rotateX(-75deg);
    }

    .pos {
      position: absolute;
      transform-style: preserve-3d;
      animation-name: invert;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    .moon {
      background-color: red;
      background-repeat: no-repeat;
      background-size: cover;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    .orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      border: 8px solid red;
      border-radius: 50%;
      animation-name: orbit;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      transform-style: preserve-3d;
    }

    /* Animations */
    @keyframes orbit {
      0%   { transform: rotateZ(0deg); }
      100% { transform: rotateZ(-360deg); }
    }

    @keyframes invert {
      0%   { transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
      100% { transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
    }

    /* Orbit sizes */
    #moon.orbit {
      width: 12em;
      height: 12em;
      margin-top: -6em;
      margin-left: -6em;
    }

    /* Planet starting positions */
    #moon .pos {
      left: 50%;
      top: -1px;
      border: solid 3px red;
    }

    /* Planet animation durations */
    #moon.orbit, #moon .pos {
      animation-duration: 2.89016s;
    }

    /* Planet sizes */
    #earth {
      font-size: 24em;
    }
    #moon {
      font-size: 4em;
    }

<div id="universe">
  <div id="galaxy">
  
    <div id="earth"></div>

    <div id="moon" class="orbit">
      <div class="pos">
        <div class="moon"></div>
      </div>
    </div>

  </div>
</div>