title: Rotate Globe in HTML
body: <p>I am trying to create a rotating earth effect Using HTML, CSS. I have created the globe in CSS. I want to rotate Image like a globe.<br />
  CSS:</p>
  
  <pre><code>#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);}
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="rotate"&gt;&lt;img class="earth" src="http://laps.noaa.gov/albers/sos/earth/globe/globe_animated_2k.gif" alt="globe"/&gt;&lt;/div&gt;
  </code></pre>