body { background: #016C38; color: #fff; } .mt-scene-label { width: 100px; height: 100px; display: block; margin: 10px; padding: 0px; } img { width: 64px; height: 64px; } .mt-imagerotationeffect img { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow: auto; } .mt-imagerotationeffect:hover img { animation: imagerotation 0.5s linear infinite; -moz-animation: imagerotation 0.5s linear infinite; -webkit-animation: imagerotation 0.5s linear infinite; } @-moz-keyframes imagerotation { 0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg) } } @-webkit-keyframes imagerotation { 0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg) } }
<div class="mt-scene-label mt-height1 mt-imagerotationeffect"> <img src="https://lh6.googleusercontent.com/-NWADcETFzG8/USHBhdaT5ZI/AAAAAAAAB9s/N3BFW7gK5HI/s428-c-o-k/fan.png" alt="" /> </div>