How to spin and rotate in css?

Question

I have tried spinning and sliding seperately and they work fine. But when I combine them they have an awkward combo.

http://jsfiddle.net/62RJc/268/

img{

    border-radius:50%;  
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

Answer 1

Its because you are using keyFrame, you can achieve this with transform alone.

Take a look at this: (Also, hovering an img while its moving is not an easy task)

img{
    border-radius:50%;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;    
}

button:hover + img {
    position: relative;
    transform: translateX(200px) rotate(360deg);
}

<button>Animate!</button>
<img src="http://lorempixel.com/output/nature-q-c-100-100-9.jpg"/>

To make image stay where it is after animation ended: 1) Remove button:hover + img {} from CSS 2) Add JS

JQuery:

$('button').click(function() {
    $('img').css('transform', 'translate(200px) rotate(360deg)');
});

JS Fiddle - Element not returning to starting position!