javascript - 在 HTML 中旋转地球仪

Question

我正在尝试使用 HTML、CSS 创建一个旋转的地球效果。我用 CSS 创建了地球。我想像地球仪一样旋转图像。
CSS:

#rotate{
    position: fixed;
    border: 1px solid #111;
    border-radius: 50%;
    overflow:hidden;
    width:100px;
    height:100px;
    box-shadow: inset 1px 8px 16px #000;
}
.earth{
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 4s; 
    animation-iteration-count: infinite;
    animation-name: rotate;
    animation-duration: 4s;
}
@-webkit-keyframes rotate{
    from{transform: translate(0px);}
    to{transform: translate(100px);}
}

HTML:

<div id="rotate"><img class="earth" src="http://laps.noaa.gov/albers/sos/earth/globe/globe_animated_2k.gif" alt="globe"/></div>

Answer 1

一个可能的解决方案是:

#rotate {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  overflow: visible;
  background-size: 210px;
  box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
    inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 210px; }
}

<div id="rotate"></div>