Spinner Horizontal with CSS

Question

I’m trying to create a spinner horizontal from a simple image only with CSS (not counting the JS trigger, of course). But so far I have not succeeded.

The effect I would like would be as well as the rotation (of the Earth) or, in a more detailed scenario, would be like a ring on a stick. If someone "hits" her, she starts spinning, gradually losing speed, until eventually stopping.

Brazilian friends can understand better as being something similar to Pião da Casa Própria by Silvio Santos XD

Usually this is done with animated Gifs, using JS as a trigger, setting a timeout, but I was trying to learn a little more about CSS3 animations.

I did a lot of research but all the examples I found revolved around Transformation with rotateX() or rotateY(), what assumes the X or Y axes of the image being rotated, rather than something else, like the center pin

I know well that the community will not do for me and, since it is preliminary for studies, this would not be right, but precisely because I could not get direct and well explained information in this regard, the way I tried failed miserably u.u':

( function( $, window, document ) {

    $( function() {

        $( '#spinner img' ).click( function() {

            var $this = $( this );

            if( $this.hasClass( 'spinning' ) ) {

                $this.removeClass( 'spinning' );

            } else {

                $this.addClass( 'spinning' );
            }
        })
    });

    // Code

}( window.jQuery, window, document ) );

#spinner {
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  
  border: 1px solid #000;
  margin: 0 auto -30px auto;
  height: 100px;
  overflow: hidden;
  width: 70%;
}

  #spinner img {
    margin-top: 19px;
  }
  
 @-webkit-keyframes spinner {
    0%     { margin-left: 235px; }
    27.33% { margin-left: 235px }
    33.33% { margin-left: -235px; }
    60.66% { margin-left: -235px; }
    66.66% { margin-left: -470px; }
    94.99% { margin-left: -470px; }
    100%   { margin-left: 470px }
}

#spinner img.spinning {
       -moz-animation: spinner .5s infinite;
         -o-animation: spinner .5s infinite;
    -webkit-animation: spinner .5s infinite;
            animation: spinner .5s infinite;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spinner">
  <img src="https://i.imgur.com/JMr8D4b.png" />
</div>