CSS3：像地球一样旋转图像

Question

我想要旋转看起来像地球的图像，它是background-image。这就是我为移动图像所做的工作。

＆＃13;

＆＃13;

.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
  background: url(images/epm-globe.png) no-repeat;
  webkit-animation: animate_background 4s linear 0s infinite;
  -moz-animation: animate_background 4s linear 0s infinite;
  -o-animation: animate_background 4s linear 0s infinite;
  animation: animate_background 4s linear 0s infinite;
  background-position: center center;
}
@-webkit-keyframes animate_background {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -500px;
  }
}
@-moz-keyframes animate_background {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -500px;
  }
}
@-o-keyframes animate_background {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -500px;
  }
}
@keyframes animate_background {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -500px;
  }
}

＆＃13;

<div class="container">
  <div class="container container-table">
    <div class="row vertical-center-row">
      <div class="text-center col-md-4 col-md-offset-4">
        <img src="images/logo.png">
        <img src="images/epm.png" class="wow hide" data-wow-delay="1s" data-wow-duration="2s">
        <img src="images/tagline.png" class="wow hide" data-wow-delay="2s" data-wow-duration="2s">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在图像垂直向上而不是旋转。

有人可以帮我解决这个问题，我如何旋转地球旋转。