CSS3 - Floating up on hover, rotating when clicked on (active) but keeping the image in the same place?

Here is an example of what I mean:

JS Fiddle: http://jsfiddle.net/MWAJC/

As you can see, when you hover over the image, the image floats up, then when you click on it, the image goes back to its original position while rotating. I would like it so that the image rotates in the already 'floated' posit开发者_高级运维ion. How would I go about this?

Multiple transformations can be applied to an element, so you can combine your 'float' and rotation transforms.

img:active {
    -moz-transform: translate(0,-1em) rotate(10deg);
    -o-transform: translate(0,-1em) rotate(10deg);
    -webkit-transform: translate(0,-1em) rotate(10deg);
}

http://jsfiddle.net/MWAJC/1/