CSS3 : rotate an image like a globe

Question

I want to rotate an image that looks like a globe , its a background-image. this is what i'm doing to move the image.

.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;
  }
}

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

Now image is going up vertically instead of rotating.

Can someone help me with this how do i rotate like a globe rotating.