在 HTML 中旋转地球答案

【问题标题】：Rotate Globe in HTML在 HTML 中旋转地球
【发布时间】：2016-09-06 04:42:23
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

如果不是 stackoverflow.com/questions/27781634/rotating-globe-in-css 的副本，则相关

标签： javascript jquery html css

【解决方案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; }
}

&lt;div id="rotate"&gt;&lt;/div&gt;

【讨论】：