jquery - 使用 CSS 动画围绕地球旋转点

Question

我有一个地球仪图像，我想在其上放置一个以不同 Angular 旋转的红点。以下是我迄今为止出于测试目的而实现的内容。

.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

忽略红线，因为那只是一个固定图像。

我不知道如何以逆时针方向绕地球旋转该点。这样，当它完成一圈旋转时，它就来自地球的后面。但当它启动时，它会覆盖全局图像。

我希望我已经正确解释了这一点:)

Answer 1

我从 this 找到了这个解决方案文章，其中有这个codepen 。这篇文章值得一读，因为作者解释了它是如何完成的。我所做的只是将 rotateY(-30deg) 添加到 #galaxy 类中，以赋予其所需的倾斜度并更改颜色。遗憾的是，红线在 Firefox 中并没有出现在行星前面，但在 chrome 中似乎出现了。

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

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

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