使用CSS动画在地球周围旋转点

Question

我有一个地球的图像，我想在这个地球上放一个以不同角度旋转的红点。以下是我目前为测试目的而实施的内容。

.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>

以下是原始地球图像和红点的屏幕截图。 https://www.awesomescreenshot.com/image/2551396/94b0a80cb7d868fe1fa10f318d698438

忽略红线，因为它只是一张固定的图像。

我不确定如何以逆时针方向旋转地球周围的点。因此，当它完成1次旋转时，它来自全球。但是当它开始时，它会覆盖全球图像。

我希望我已经妥善解释了这一点：）

Answer 1

我在this文章中找到了此解决方案，其中包含此codepen。这篇文章值得一读，因为作者解释了它是如何完成的。我所做的就是将rotateY(-30deg)添加到#galaxy类，以便为您提供所需的倾斜并更改颜色。可悲的是，红线并没有出现在火星的行星前面，但似乎是用铬做的。

要更改地球和月球的大小，您只需更改CSS底部的#earth和#moon选择器的字体大小。玩一下代码吧。我相信你能够让它看起来完全符合你的要求。

最好以全屏模式查看代码段。

＆＃13;

＆＃13;

/* 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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;