グローブを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

：// stackoverflowの：HTTPのない重複した場合は関連

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