CSS3 - всплывает при наведении, вращается при нажатии (активен), но держит изображение в том же месте?

Question

Вот пример того, что я имею в виду:

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

Как вы можете видеть, когда вы наводите курсор мыши на изображение, изображение всплывает, а затем вынажмите на нее, изображение вернется в исходное положение при вращении.Мне бы хотелось, чтобы изображение вращалось в уже «плавающем» положении.Как бы я пошел по этому поводу?

Answer 1

Несколько элементов могут быть применены к элементу, так что вы можете комбинировать ваши преобразования 'float' и вращения.

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/