I'm trying to create a horizontal spinner from a simple image with CSS only ( without counting the trigger in JS, of course). But so far I have not been successful.
The effect I would like would be just like the spin (Earth) or, in a more detailed scenario, it would be like a ring on a stick. If someone "hits" it, it begins to spin, gradually losing speed, eventually stopping.
Brazilian friends can better understand how something similar to Silvio Santos XD's Own Home Top is
Usually this is done with animated GIFs, using JS as a trigger, setting a timeout , but I was trying to learn a bit more about CSS3 animations.
I searched a lot but all the examples I found revolved around transformation with rotateX() or rotateY() , which assumes the X or Y axes of the image being rotated, rather than another thing, like the central pin
I know well that the community will not do it for me, and since it is mainly for studies, this would not even be right, but just because I did not get direct and well explained information on this, 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><divid="spinner">
<img src="https://i.imgur.com/JMr8D4b.png" />
</div>